3

我正在使用无序列表，我想将具有 .price 类的列表项移动到列表的底部。

<ul class="itemExtraFieldslist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="price">Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>

我试过使用：

$('ul.itemExtraFieldslist').sortable({
    stop: function (event, ui) {
        $(this).find('li.price').appendTo(this);
    }
});

但这不起作用。这似乎是一件很简单的事情，但我似乎可以理解它。我在这里创建了一个 jsFiddle。

Stack Overflow 上已经有一个答案，但它不起作用（我的版本基于那个答案）。

谢谢你的帮助

4

5 回答 5

12

我不知道你想用什么来实现sortable 。
但这里是更新的 小提琴

$('ul.itemExtraFieldslist').find('li.price').appendTo('ul.itemExtraFieldslist');

简单的。!.

于 2013-07-12T10:18:17.440 回答
0

Sortable是jQuery UI提供的功能，您的 JSFiddle 不包含该功能。使用 jQueryUI 选中该框，它可以工作：更新的 JSFiddle

此外，如果您希望它在您自己的网站上运行，您应该下载 jQuery UI 库。

于 2013-07-12T10:20:18.633 回答
0

您可能会使用这样的直接代码

var parent = $(".itemExtraFieldslist");    
var childToMoveLast = $(".price", parent).remove();
parent.append(childToMoveLast);
于 2013-07-12T10:19:10.700 回答
0

您的意思是您希望第 5 项始终位于底部吗？您的小提琴有效，您忘记在小提琴中包含 jQuery UI。

jQuery('ul.itemExtraFieldslist').sortable({
    stop: function(event, ui) {
      $(this).append($('li.price'));
    }
});

更新了 JSFiddle

于 2013-07-12T10:17:57.413 回答
0

您还可以使用：

$('li.price').insertAfter($('li').last());
于 2019-05-01T09:19:47.853 回答