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


我有这个可以排序的列表。 在排序完成后,如何将带有.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>

8063
2017-09-28 14:51


起源



答案:


您可以将它们附加(移动)到列表的末尾 .appendTo(), 喜欢这个:

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

你可以在这里尝试一下,这得到了所有 .neutral 里面的元素并将它们附加到 this 哪一个是 ul.thumbs 我们目前在,这将适用于多个独立的缩略图列表。


9
2017-09-28 14:53



嗨,尼克。实际上我正在尝试使用可放置和可排序的东西,这样就不会对我这样做了。你能不能看一下 jsfiddle.net/Y2ER7 它基于jquery.ui.droppable购物车示例。 (我需要找到一种方法从拇指上获取src以及btw) - FFish


答案:


您可以将它们附加(移动)到列表的末尾 .appendTo(), 喜欢这个:

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

你可以在这里尝试一下,这得到了所有 .neutral 里面的元素并将它们附加到 this 哪一个是 ul.thumbs 我们目前在,这将适用于多个独立的缩略图列表。


9
2017-09-28 14:53



嗨,尼克。实际上我正在尝试使用可放置和可排序的东西,这样就不会对我这样做了。你能不能看一下 jsfiddle.net/Y2ER7 它基于jquery.ui.droppable购物车示例。 (我需要找到一种方法从拇指上获取src以及btw) - FFish


相当于以下内容:

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

您可以通过选择它并在其他地方附加或预先添加元素来移动页面。

注意:请注意范围 - 如果您正在使用类,并且此UI在页面上多次出现,则上述selctors需要使用以下方法限定为当前实例 ui 参数传递给stop函数。


3
2017-09-28 14:57