Question

How do I reorder dom elements based on the css position left?

I have 3 elements, with left values of 10, 20, and 30 percent, and position: absolute.

In the DOM, they’re in the order 20, 10, 30 but I’d like to order them ascending according to the left attribute (10, 20, 30).

All three elements are inside a div with id parent

Answer 1

You’ll need to loop through the child elements as an array so that they can be sorted, and then you need to reattach the children in the right order. This can be done in pure JavaScript without jQuery:

var parent = document.getElemntById(parent),
    children = [];

// loop through the child nodes, add them to your array
// and remove them from the parent
for (var i = parent.childNodes.length-1; i >= 0; i--) {
    children.push(parent.childNodes[i]);
    parent.removeChild(parent.childNodes[i]);
}
// sort them based on the left property
children.sort(function(a,b){
    return window.getComputedStyle(a)['left'] - window.getComputedStyle(b)['left'];
});
// add them back to the parent in order
for (var i in children) {
    parent.appendChild(children[i]);
}