从AZ订购div

我有一个聊天网页，每个成员都有一个DIV。 DIV的外观如下：

每个“聊天会员”DIV都有更多内容 – img，文本等。如何使用JQUERY从AZ重新订购div？ 我想保留每个DIV的内容 – 只需将ID移动到类似于AZ。

Answer 1

您可以获取子div元素的集合，然后使用sort()按其id属性进行排序，然后将其附加到容器，从而有效地重新排序它们。

 var parent = $('#chatCenterMembers'); parent.children('div').sort(function(a, b) { return a.id > b.id; }).appendTo(parent); 

jsFiddle 。

Answer 2

这是一个工作小提琴 。

 //Grab the parent container var mylist = $('#chatCenterMembers'); //Get all the child div's in the parent var listitems = mylist.children('div').get(); //Utilize the array.sort listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); $.each(listitems, function(idx, itm) { mylist.append(itm); }); 

代码取自http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/并略有修改。

Answer 3

这应该这样做：

 // get an array of DOM elements var $elements = $('#chatCenterMembers div').get(); // sort the elements by ID $elements.sort(function(a, b) { if(a.id === b.id) return 0; return a.id < b.id ? -1 : 1; }); // append the elements $('#chatCenterMembers').append($elements); 

Answer 4

问题是，按什么排序？ 让我们假设我们想按classnames命令它们，它看起来像：

 var $members = $('#chatCenterMembers'); $members.children('div').detach().sort(function(a,b) { return a.className.localeCompare(b.className); }).appendTo($members); 

jsfiddle： http ： //jsfiddle.net/mCLxb/

我们实际上可以在这里省略.detach() ，但为方便起见，可能很高兴在那里。