JQuery将列表项移动到无序列表的末尾

Question

我正在使用无序列表，我想将带有.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 here。

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

谢谢你的帮助

Answer 1

我没有想法你想用sortable实现什么。 但这里更新了Fiddle

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

简单。 ！

Answer 2

您可以使用这样的直接代码

var parent = $(".itemExtraFieldslist");    
var childToMoveLast = $(".price", parent).remove();
parent.append(childToMoveLast);

Answer 3

Sortable是由jQuery UI提供的函数，您的JSFiddle不包含它。选中jQueryUI框，它可以正常工作：Updated JSFiddle

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

Answer 4

你的意思是你希望第5项总是在底部吗？你的小提琴工作，你忘了在小提琴中包含jQuery UI。

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

Updated JSFiddle

Answer 5

你也可以用：

$('li.price').insertAfter($('li').last());