Question

I have a chat web page that has a DIV for each member. The DIV’s look as follows:

 <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>

Each of the “chatmember” DIV’s have more content inside them – img, text etc.
How can I re-order the div’s from A-Z using JQUERY?
I want to keep the contents with each DIV as it is – just move the ID to resemble A-Z.

Answer 1

You could get a collection of child div elements, and then use sort() to sort by their id attribute, and then append this to the container, effectively reordering them.

var parent = $('#chatCenterMembers');

parent.children('div').sort(function(a, b) {
   return a.id > b.id;
}).appendTo(parent);

jsFiddle.