Geek Answers Handbook

Sorting an array with DOM tags and attributes by left and top values

I have an array with DOM tags (div -> children img -> div closed). These tags have attributes (left and top values). I added em as nodeLists, so I can refer to the offsetLeft and offsetTop elements to determine these values, but I cannot determine how to reconfigure these tags in the array, increasing to the left or top value.

HTML

<body>
    <div style="left:40px;top:10px;position:absolute">
        <img src="assets/images/text1.png" />
    </div>
    <div style="left:200px;top:88px;position:absolute">
        <img src="assets/images/text2.png" />
    </div>
    <div style="left:85px;top:166px;position:absolute">
        <img src="assets/images/text3.png" />
    </div>
</body>

Javascript

var unsortedElements = [];
        var sortedElements = [];

        var elements = document.querySelectorAll("body > div");
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            if (element != null) {
                unsortedElements.push(element);

                var x = element.offsetLeft;
                var y = element.offsetTop;
                customSort(unsortedElements[i]);
            }
        }

function customSort(element){
var left = element.offsetLeft;

sortedElements.push(left);
console.log(sortedElements); -> will return the left values (40,85,200) BUT i need this array sorted with div tags (like [<div style="left: 40px;">img child</div>, <div style="left: 85px;">img child</div>, <div style="left: 200px;">img child</div>])

}

Note

Pure Javascript, please!

Thanks:)

+4
source share
3 answers

You can use a high order function to create a custom filter to filter the DOM element.

You can do the following:

var elements = document.querySelectorAll('div');

//Create our function generator
function sortBy(prop){
  return function(a, b){
    var filter_a = parseInt( a.style[prop] );
    var filter_b = parseInt( b.style[prop] );
    return filter_a < filter_b
    ? -1
    : (filter_a > filter_b ? 1 : 0);
  }
}

function sortDom(filter){
  //Transform our nodeList into array and apply sort function
  return [].map.call(elements, function(elm){
    return elm;
  }).sort(sortBy(filter))
}

//Sort by left style property
var byLeft = sortDom('left');
//Sort by top style property
var byTop = sortDom('top');
+2

sort javascript-. , ( querySelectorAll), :

var elements = document.querySelectorAll("body > div");
var divs=[];
for (var i=0;i<elements.length;i++) {
    divs.push(elements[i]);
}

. :

divs.sort(function(a,b){
    var aLeft = a.style.left.replace("px","");
    var bLeft = b.style.left.replace("px","");
    return aLeft-bLeft;
});

left , 123px.

, , , @Paul Boutes, , , .

0

ES6 , . left. , .

HTML

<caption>Sorting by left offset</caption>
<div id="container" style="position:relative">
    <div class="candidate" style="left:200px;top:88px;position:absolute">
        <span>3 was 1 before sorting</span>
    </div>
    <div class="candidate" style="left:40px;top:10px;position:absolute">
        <span>1 was 2 before sorting</span>
    </div>    
    <div class="candidate" style="left:85px;top:166px;position:absolute">
        <span>2 was 3 before sorting</span>
    </div>
</div>

JavaScript/EcmaScript 2015

Array.from(document.querySelectorAll("div.candidate")).sort(function(a, b){
    let aLeft = a.style.left.replace("px","");
    let bLeft = b.style.left.replace("px","");
    return aLeft-bLeft;
}).forEach(function(el){
    document.querySelectorAll("#container")[0].appendChild(el);
});

JSFiddle http://jsfiddle.net/a4e41pmr/

appendChild .

0

More articles:


All Articles