jQuery移动列表项到列表结尾

Question

我有一个可以使用sortable进行排序的列表。 当排序完成时，如何将具有类.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>

- FFish

Answer 1

您可以使用.appendTo()将它们（移动）添加到列表的末尾，像这样：

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

你可以在这里试试，它获取了所有.neutral元素并将它们追加到this中，this是我们目前所在的ul.thumbs，这也适用于多个独立缩略图列表。

- Nick Craver

---

嗨，Nick。实际上，我已经在尝试使用 droppable 和 sortable 进行一些操作了，所以这对我来说不起作用。你能看一下 http://jsfiddle.net/Y2ER7/ 吗？它基于 jquery.ui.droppable 购物车示例。（顺便说一下，我还需要找到一种从缩略图中获取 src 的方法） - FFish

Answer 2

相当于以下内容：

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

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

注意：要小心范围——如果您正在使用类并且此UI在页面上出现多次，则上述选择器需要使用传递到停止函数中的“ui”参数来限定当前实例的范围。

- roborourke