Question

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

 <div id="chatCenterMembers">
   <div id="lee" class="chatmember 10001"></div>
   <div id="arch" class="chatmember 10008"></div>
   <div id="steven" class="chatmember 10041"></div>
   <div id="tim" class="chatmember 10432"></div>
   <div id="ssan" class="chatmember 10007"></div>
   <div id="yanti" class="chatmember 10034"></div>
 </div>

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

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

这是a working Fiddle。

//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()，但为方便起见，可能很高兴在那里。

从A-Z订购div

4 个答案: