Javascript jQuery单击外部元素以向上或向下移动包含复选框的无序列表项

我需要一个“上移”按钮和一个“下移”按钮，该按钮将列表项（包含选中的复选框）在列表中上移1位或下移1位，具体取决于它们单击的按钮。我看过几篇关于类似情况的帖子，但似乎没有一篇能完全满足我的需要。我想继续使用主jquery.js文件

                <ul id="theList">
                    <li>
                        <label>
                            <span><input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0" />Checkbox 1</span></label>
                    </li>
                    <li>
                        <label>
                            <span><input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_1" />Checkbox 2</span></label>
                    </li>
                    <li>
                        <label>
                            <span><input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_2" />Checkbox 3</span></label>
                    </li>
                </ul>
                <a href="#" id="moveUp">Move Up</a>
                <a href="#" id="moveDown">Move Down</a>

---

您可以使用以下选项：

一些注释

• 您在非jQuery对象上使用jQuery方法

  this.prev（）

  /

  this.next（）

  。它应该是

  $（this.prev（）

  /

  $（this.next（）

  ）

• $（此）

  在当前范围中引用了向上/向下元素。您不希望根据向上/向下按钮索引更改复选框元素的位置。您需要更改相对于复选框元素的位置，因此您将使用类似于

  $checkedeElement.closest（'li'）.prev（）的内容
  

如果要在移动多个复选框元素时使用此选项，可以使用：

试试这个：

$('#moveUp').click(function() {
    $('#theList li :checked').each(function() {
       var li = $(this).closest('li');
       var previous = li.prev();
       // avoid having the selected elements move over each other
       if (previous.length > 0 && previous.find(':checked').length <= 0)
           li.detach().insertBefore(previous);
    });
});

$('#moveDown').click(function() {
    // need to iterate in reverse order - starting from the last
    var selected = $('#theList li :checked');
    var reverse = $(selected.get().reverse());
    reverse.each(function() {
       var li = $(this).closest('li');
       var next = li.next();
       // avoid having the selected elements move over each other
       if (next.length > 0 && next.find(':checked').length <= 0)
           li.detach().insertAfter(next);
    });
});

$（'#moveUp'）。单击（函数（）{
$（'#列表li:checked'）。每个（函数（）{
var li=$（this.closest（'li'）；
var previous=li.prev（）；
//避免所选图元相互移动
如果（previous.length>0&&previous.find（“：checked”）.length 0&&next.find（“：checked”）.length谢谢@JoshCrozier这很有效！我也很感谢添加的注释。非常彻底。
$('#moveUp').click(function() {
    var $checkedElement = $('#theList li :checked');
    $checkedElement.closest('li').insertBefore($checkedElement.closest('li').prev());
});

$('#moveDown').click(function() {
    var $checkedElement = $('#theList li :checked');
    $checkedElement.closest('li').insertAfter($checkedElement.closest('li').next());
});

$('#moveUp').click(function() {
    var $checkedElement = $('#theList li :checked');
    $checkedElement.each(function () {
        $(this).closest('li').insertBefore($(this).closest('li').prev());
    });
});

$('#moveDown').click(function() {
    var $checkedElement = $('#theList li :checked');
    $($checkedElement.get().reverse()).each(function () {
        $(this).closest('li').insertAfter($(this).closest('li').next());
    });
});

$('#moveUp').click(function() {
    $('#theList li :checked').each(function() {
       var li = $(this).closest('li');
       var previous = li.prev();
       // avoid having the selected elements move over each other
       if (previous.length > 0 && previous.find(':checked').length <= 0)
           li.detach().insertBefore(previous);
    });
});

$('#moveDown').click(function() {
    // need to iterate in reverse order - starting from the last
    var selected = $('#theList li :checked');
    var reverse = $(selected.get().reverse());
    reverse.each(function() {
       var li = $(this).closest('li');
       var next = li.next();
       // avoid having the selected elements move over each other
       if (next.length > 0 && next.find(':checked').length <= 0)
           li.detach().insertAfter(next);
    });
});