Question

我有一个未排序的列表，可以通过单击他的向上或向下按钮来上下移动每个元素。女巫工作正常。

我希望此列表是循环的。例如：如果单击line_1的向上按钮，则line_1会在列表末尾移动，或者如果单击line_3的向下按钮，则line_3会在列表的开头移动。

我试过这个，但第一行不会移到列表的末尾：

$('.up').click(
    function() {
        if ($(this).parent.is(':first'))
            $(this).parent.insertAfter($(this).parent.siblings().last());
        else
            $(this).parent.insertBefore($(this).parent.prev());
    }
);

我的清单：

<ul>
    <li>line_1
        <button class="up">up</button>
        <button class="down">down</button>
    </li>
    <li>line_2
        <button class="up">up</button>
        <button class="down">down</button>
    </li>
    <li>line_3
        <button class="up">up</button>
        <button class="down">down</button>
    </li>
</ul>

和我的jquery代码：

$('.up').click(function () {
    $(this).parent().insertBefore($(this).parent().prev());
});

$('.down').click(function () {
    $(this).parent().insertAfter($(this).parent().next());
});

如何使列表循环？

Here is a JSFiddle example

Answer 1

你几乎得到了它 - 你正在寻找:first-child选择器，而不是:first。

另外，为了提高速度和可读性，我建议将jQuery引用缓存到列表项，以便不需要遍历对按钮父级的每次引用的DOM。这是我编写代码的方式：

var $ul = $('ul')

$('.up').click(function () {
    var $li = $( this ).parent();

    if ( $li.is(':first-child') )
        $ul.append($li);
    else 
        $li.insertBefore($li.prev());
});

$('.down').click(function () {
    var $li = $( this ).parent();

    if ( $li.is(':last-child') )
        $ul.prepend( $li );        
    else
        $li.insertAfter($li.next());
});

以循环方式使用向上和向下按钮移动列表元素

1 个答案: