按内容项对div排序

Question

是否可以按内容项对div进行排序？例如，我有一个div，它有3个子div.In，每个子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转换为数组，然后使用排序：

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

在行动中