如何使用jQuery根据它们的id对div进行排序？

Question

我有随机IDS一组的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值对它们进行排序的快捷方式？ 谢谢。

Answer 1

我会用tinysort插件：

http://tinysort.sjeiti.com/

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

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

Answer 2

有插件之类做的元素排序。如果您打算实际重新排序DOM元素，则应该使用其中的一个。

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

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

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

Answer 3

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

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

演示：http://jsfiddle.net/abdennour/fDZjR/1/