jQuery将列表项移动到列表末尾

Question

我有这个可以排序的列表.在排序完成后,如何将带有.neutral的li项目移动到列表的末尾？

$(".thumbs").sortable({
    stop: function(event, ui) { 
        // move .neutral at the end of this list
    }
});

<ul class="thumbs">
    <li>red</li>
    <li>green</li>
    <li class="neutral">none</li>
    <li>yellow</li>
    <li>blue</li>
<ul>

Answer 1

您可以将它们附加(移动)到列表的末尾.appendTo(),如下所示:

$(".thumbs").sortable({
    stop: function(event, ui) {
      $(this).find('.neutral').appendTo(this);
    }
});

你可以在这里试试看,这得到所有的.neutral内部元件,并追加他们this这是ul.thumbs我们目前所在,这会为缩略图的多个独立列表工作了.

Answer 2

等效项如下：

$(".neutral").appendTo(".thumbs");
OR
$(".thumbs").append(".neutral");

您可以通过选择元素并将其附加到其他位置或将其添加到其他位置来在页面上移动元素。

注意：注意范围 - 如果您使用类并且此 UI 在页面上多次出现，则需要使用ui传递给 stop 函数的参数将上述选择器的范围限定为当前实例。