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

你的意思是你想第5项总是在底部吗？你的小提琴有效，你忘了在小提琴中包含jQuery UI。

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

<强> Updated JSFiddle

Answer 3

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

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

Answer 4

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

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

Answer 5

您还可以使用：

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

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

5 个答案: