javascript - 按 css 位置重新排序 dom 中的元素

Question

如何根据左侧的 css 位置重新排序 dom 元素？

我有 3 个元素，其left值为 10%、20% 和 30%，并且position: absolute.

在 DOM 中，它们是按顺序排列的，20, 10, 30但我想根据left属性 ( 10, 20, 30) 对它们进行升序排列。

所有三个元素都在div带有 id的内部parent

Answer 1

您需要将子元素作为数组循环，以便对它们进行排序，然后您需要以正确的顺序重新附加子元素。这可以在没有 jQuery 的纯 JavaScript 中完成：

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]);
}

Answer 2

基本上，循环遍历要修改的 DOM 元素，将它们放入数组中。然后按您想要的属性对数组进行排序（在这种情况下window.getComputedStyle(elem)['left']），然后按照数组告诉您的顺序重新插入元素。