重新排列列表元素 – jQuery？

是否有可能使用JavaScript或纯jQuery对<li>元素进行重新sorting。 所以，如果我有一个愚蠢的名单，如下所示：

 <ul> <li>Foo</li> <li>Bar</li> <li>Cheese</li> </ul> 

我将如何移动列表元素？ 就像在Foo列表元素前加上Cheese列表元素，或者将Foo移到Bar后面。

可能吗？ 如果是这样，怎么样？

Answer 1

 var ul = $("ul"); var li = ul.children("li"); li.detach().sort(); ul.append(li); 

这是一个简单的例子，其中<li>节点按某种默认顺序sorting。 我正在调用detach以避免删除与li节点相关的任何数据/事件。

您可以传递函数进行sorting，并使用自定义比较器进行sorting。

 li.detach().sort(function(a, b) { // use whatever comparison you want between DOM nodes a and b }); 

Answer 2

如果有人正在寻找重新sorting的元素上移/下移一些列表一步一步一步…

 //element to move var $el = $(selector); //move element down one step if ($el.not(':last-child')) $el.next().after($el); //move element up one step if ($el.not(':first-child')) $el.prev().before($el); //move element to top $el.parent().prepend($el); //move element to end $el.parent().append($el); 

Answer 3

下面是一个jQuery插件来帮助这个function： http : //tinysort.sjeiti.com/

Answer 4

我最喜欢jQuery的一件事就是如此快速地编写小小的附加组件是多么容易。

在这里，我们创build了一个小插件，它接受一个select器数组，并使用它来sorting目标元素的子项。

 // Create the add-on $.fn.orderChildren = function(order) { this.each(function() { var el = $(this); for(var i = order.length - 1; i >= 0; i--) { el.prepend(el.children(order[i])); } }); return this; }; // Call the add-on $(".user").orderChildren([ ".phone", ".email", ".website", ".name", ".address" ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="user"> <li class="name">Sandy</li> <li class="phone">[phone]</li> <li class="address">123 Hello World Street</li> <li class="email">[e-mail]</li> <li class="website">https://google.com</li> </ul> <ul class="user"> <li class="name">Jon</li> <li class="phone">[phone]</li> <li class="address">123 Foobar Street</li> <li class="email">[e-mail]</li> <li class="website">https://apple.com</li> </ul> <ul class="user"> <li class="name">Sarah</li> <li class="phone">[phone]</li> <li class="address">123 Javascript Street</li> <li class="email">[e-mail]</li> <li class="website">https://microsoft.com</li> </ul> 

Answer 5

像这样的东西？

 ​var li = $('ul li').map(function(){ return this; })​.get(); $('ul').html(li.sort()); 

演示

我有点失落你可能想要这样的事情…

 $('ul#list li:first').appendTo('ul#list'); // make the first to be last... $('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd... $('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last... 

更多这里here1和here2

Answer 6

看看jQuery UI可sorting

http://jqueryui.com/demos/sortable/