我有一个带有 DOM 标签的数组(div -> children img -> div closed)。这些标签具有属性(左值和上值)。我将 em 添加为 nodeList，这样我就可以访问元素 offsetLeft 和 offsetTop 来确定这些值，但我无法弄清楚如何按左值或上值升序重新排列数组中的这些标签。
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>])
}
注意
请使用纯 Javascript!
谢谢你:)
最佳答案
使用 ES6，您可以获得一组新函数，可以更优雅地完成工作。 出于该更新的目的，我将对左侧属性进行排序。 我想从现在开始替换比较器函数很简单。
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 作为一个技巧，在排序后移动节点。
关于javascript - 按左侧值和顶部值对包含 DOM 标签和属性的数组进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32256644/