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。

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

感谢您的帮助。

- David Brooks

---

首先，更正以下错误："Uncaught TypeError: Object [object Object] has no method 'sortable'" - Thirumalai murugan

Answer 1

我不知道你使用 sortable 希望达到什么目的。
但是这里有更新后的 Fiddle 。

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

简单易懂。！。

- Nagesh Salunke

Answer 2

你可以使用类似这样的简单代码

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

- Ankur Verma

Answer 3

你也可以使用：

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

- Alon Gouldman

Answer 4

你的意思是你希望项目5始终位于底部吗？ 你的fiddle有效，但你忘记在fiddle中包含jQuery UI。

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

更新的JSFiddle

- c.P.u1

Answer 5

Sortable是由jQuery UI提供的一个函数，你的JSFiddle中没有包含它。勾选上jQueryUI并且它就能正常工作：更新后的JSFiddle

另外，如果你想在自己的网站上使用它，你应该下载jQuery UI库。

- Richard de Wit