Question

是否可以按内容项排序div？例如，我有一个div有3个孩子div。在每个孩子div中存在不同数量的span元素。我可以对此div进行排序吗？

<div id="mydiv">
    <div>
        <span>1</span>
        <span>2</span>
    </div>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <div>
        <span>1</span> 
    </div>
</div>

Answer 1

您可以将nodeList转换为数组，然后使用sort：

var myDiv = document.getElementById("mydiv")
var elements = [].slice.call(myDiv.children);

var sorted = elements.sort(function(a, b) {
  return a.children.length - b.children.length;
})

console.log('SORTED', sorted)

要将此排序应用于DOM，只需重新添加这些元素：

sorted.forEach(el=>myDiv.appendChild(el));

in action

按内容项排序div

1 个答案: