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

发布于 2024-09-25 05:59:09 字数 417 浏览 3 评论 0原文

我有这个列表，可以使用 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>

原文

I have this list that can be sorted with sortable.
How can I move the li item with class .neutral to the end of the list when sorting is finished?

$(".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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

翻了热茶 2024-10-02 05:59:09

您可以使用 .appendTo()< 将它们附加（移动）到列表末尾/a>，像这样：

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

你可以在这里尝试一下，这会得到所有< code>.neutral 元素并将其附加到 this 中，这是我们当前所在的 ul.thumbs，这适用于多个独立的缩略图列表也。

You can append (moving) them to the end of the list with .appendTo(), like this:

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

You can give it a try here, this gets all the .neutral elements inside and appends them to this which is the ul.thumbs we're currently in, this will work for multiple independent lists of thumbnails too.

回复收藏 0 原文

零崎曲识 2024-10-02 05:59:09

等效内容如下：

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

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

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

The equivalent would be the following:

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

You can move an element around a page by selecting it and appending or prepending it elsewhere.

NB: be careful with scope - if you're using classes and this UI appears multiple times on a page the above selctors will need to be scoped to the current instance using the ui parameter passed into the stop function.

回复收藏 0 原文

~没有更多了~