How to order divs by id in javascript?

Question

I have this HTML code:

<div id="main"> <div id="dv_7">...</div> <div id="dv_1">...</div> <div id="dv_8">...</div> <div id="dv_4">...</div> <div id="dv_11">...</div> <div id="dv_2">...</div> </div> 

How to order divs in maindiv using javascript? I have no idea: (

thanks in advance,

Answer 1

What about:

 var main = document.getElementById( 'main' ); [].map.call( main.children, Object ).sort( function ( a, b ) { return +a.id.match( /\d+/ ) - +b.id.match( /\d+/ ); }).forEach( function ( elem ) { main.appendChild( elem ); }); 

Live demo: http://jsfiddle.net/ZEKrH/6/

(You will need to pin these array methods for IE8.)

Answer 2

Hope this helps. Updated identifier to take alphabetical order 1 and 11 into account.

 <div id="main"> <div id="dv_07">7...</div> <div id="dv_01">1...</div> <div id="dv_08">8...</div> <div id="dv_04">4...</div> <div id="dv_11">11...</div> <div id="dv_02">2...</div> </div>​ 

JQuery parameter:

 var mylist = $('#main'); var listitems = mylist.children('div').get(); listitems.sort(function(a, b) { var compA = $(a).attr('id').toUpperCase(); var compB = $(b).attr('id').toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }) $.each(listitems, function(idx, itm) { mylist.append(itm); });​ 

Javascript options:

 var mylist = document.getElementById('main'); var divs = mylist.getElementsByTagName('div'); var listitems = []; for (i = 0; i < divs.length; i++) { listitems.push(divs.item(i)); } listitems.sort(function(a, b) { var compA = a.getAttribute('id').toUpperCase(); var compB = b.getAttribute('id').toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }); for (i = 0; i < listitems.length; i++) { mylist.appendChild(listitems[i]); }​ 

Answer 3

the following may work:

 var main = document.getElementById("main"); for(var i = 11; i > -1; i--) { var div = document.getElementById("dv_" + i); if(div != null) main.appendChild(div); } 

Answer 4

For a solution that works for any arbitrary number of child divs with numbers in any range, you can use such a function (which actually analyzes the number of our identifier and does true numerical sorting on it):

 function sortChildrenDivsById(parentId) { var parent = document.getElementById(parentId); // get child divs var children = parent.getElementsByTagName("div"); var ids = [], obj, i, len; // build an array of objects that has both the element // and a parsed div number in it so we can sort for (i = 0, len = children.length; i < len; i++) { obj = {}; obj.element = children[i]; obj.idNum = parseInt(children[i].id.replace(/[^\d]/g, ""), 10); ids.push(obj); } // sort the array ids.sort(function(a, b) {return(a.idNum - b.idNum);}); // append in sorted order for (i = 0; i < ids.length; i++) { parent.appendChild(ids[i].element); } } 

A working example is here: http://jsfiddle.net/jfriend00/v9mCM/

FYI is a cross-browser, simple javascript and will even work in older browsers without padding.

---

Here is another way to do this with slightly less code:

 function sortChildrenDivsById(parentId) { var parent = document.getElementById(parentId); var children = parent.getElementsByTagName("div"); var ids = [], i, len; for (i = 0, len = children.length; i < len; i++) { ids.push(parseInt(children[i].id.replace(/^.*_/g, ""), 10)); } ids.sort(function(a, b) {return(a - b);}); for (i = 0, len = ids.length; i < len; i++) { parent.appendChild(document.getElementById("dv_" + ids[i])); } } 

Working example: http://jsfiddle.net/jfriend00/TqJVb/

All id identifiers are parsed and placed into a sorted array, and then each object is scanned by an identifier and reinserted in sorted order. It will not be as fast as the first, but it is less than code.

Answer 5

The following is compatible with browsers with IE 5 and similar, without padding or libraries. The sorting function can be changed to sort in numerical terms, currently it sorts divs as 1, 11, 2, 4, etc. It is not so difficult to change so that they are sorted 1, 2, 4, ... 11.

 function sortDivs(div) { var divs = div.getElementsByTagName('div'); var a = []; for (var i=0, iLen=divs.length; i<iLen; i++) { a[i] = divs[i]; } a.sort(function(a, b) { return a.id < b.id? -1 : a.id == b.id? 0 : 1; }); while (iLen--) { div.insertBefore(a[iLen], div.firstChild); } } window.onload = function() { sortDivs(document.getElementById('main')); } 

Edit

A minimalist version for those who think it matters with comments and numerical sorting.

 function sortDivs(div) { var divs = div.getElementsByTagName('div'); // Convert divs collection to an array for (var i=0, iLen=divs.length, a=[]; i<iLen; i++) a[i] = divs[i]; // Sort the array numerically a.sort(function(a, b) { return a.id.split('_')[1] - b.id.split('_')[1]; }); // Move elements to sorted order while (iLen--) div.insertBefore(a[iLen], div.firstChild); }