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

Question

我需要一个 "Move Up" 按钮和一个 "Move Down" 按钮，它们将在列表中将列表项（包含已选中的复选框）向上移动 1 位或向下移动 1 位，具体取决于哪个他们点击的按钮。我看过几篇处理类似情况的帖子，但其中 none 似乎完全涵盖了我所需要的。我想坚持使用主 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代码：

$('#moveUp').click(function() {
    return !$('#theList li :checked').closest('li').insertBefore(this.prev());
});

$('#moveDown').click(function() {
    return !$('#theList li :checked').closest('li').insertAfter(this.next());
});

Answer 1

您可以使用以下内容：

Example Here

$('#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());
});

一些注意事项..

您在非 jQuery 对象 this.prev()/this.next() 上使用了 jQuery 方法。应该是$(this).prev()/$(this).next().
$(this) 在当前作用域中引用了 up/down 个元素。您不想根据 up/down 按钮索引更改复选框元素的位置。您需要更改相对于复选框元素的位置，因此您可以使用类似 $checkedElement.closest('li').prev().

如果您希望它在移动多个复选框元素时起作用，您可以使用：

Example Here

$('#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());
    });
});

Answer 2

试试这个：

$('#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);
    });
});

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

jQuery Click on an outside element to move unordered list items up or down that contain checked checkboxes

javascript

jquery

html

checkbox

checked