如何使用 jQuery 根据 id 对 div 进行排序？答案

【问题标题】：How to sort divs according to their id using jQuery?如何使用 jQuery 根据 id 对 div 进行排序？
【发布时间】：2011-01-22 00:55:46
【问题描述】：

我有一组带有随机 id 的 div：

<div id="container">
   <div id="2"></div>
   <div id="9"></div>
   <div id="7"></div>
   <div id="1"></div>
   <div id="4"></div>
</div>

有没有一种快速的方法可以使用 jQuery 根据它们的 id 值对它们进行排序？谢谢。

【问题讨论】：

【解决方案1】：

我会使用 tinysort 插件：

在你的情况下，它会是这样的：

$("#container > div").tsort("",{attr:"id"});

【讨论】：

这个。我不得不忍气吞声，承认我无法弄清楚如何让sort() 工作，无论我传递给它什么功能。我集成了 TinySort，我的生活从未如此轻松。
对于那些通过谷歌找到这个的人，我相信上面的例子可能已经过时了。这个插件对我有用：tinysort('#container > div',{attr: 'id'})

【解决方案2】：

有插件等对元素进行排序。如果您计划实际重新排序 DOM 元素，您可能应该使用其中之一。

如果您只想要一个已排序的 div 列表，您可以使用 Javascript - 因为可以使用自定义比较函数对数组进行排序。您可以使用toArray() 将选定的<div>s 集合转换为数组，然后使用此机制对其进行排序。

$('#container > div').toArray().sort( function(a,b) { a.id - b.id } );

您还可以使用detach() 和appendTo() 方法按排序顺序删除和重新插入元素。但是，这可能不是对 DOM 元素重新排序的最有效方式。

【讨论】：

【解决方案3】：

试试我的 jquery 插件$.toArrayouter，使用 Underscore 库。

$('#container').html(_.sortBy($('#container>div').toArrayouter(),function (name) {return name} ).join(''))

【讨论】：