Javascript - 对 div 的集合进行排序

Question

我正在尝试单独学习 Javascript，所以请不要推荐库或 jQuery。

我有一个 div 列表，我希望用户能够按它们的值对它们进行排序。例如:

<button onclick="sort();">Test</button>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">8</div>
<div class="num">1</div>

JS:

function sort(){
   var elements = document.getElementsByClassName("num");
   elements.sort();
}

对于这其中的问题，我找不到一个直接的答案。 getElementsByClassName 是否返回具有该名称的每个 div 的值数组？如何，当数组被排序时，所以我反射(reflect)在 div 中的变化？

Answer 1

您不能在 NodeList 上使用 sort() 函数，这实际上是通过调用 getElementsByClassName 或 querySelectorAll 获得的.

因此在使用 Array.sort() 之前，您必须将其转换为数组:

// Get elements and convert to array
const elems = [...document.querySelectorAll(".num")];

// Sort elements in-place
elems.sort((a, b) => Number(a.innerText) - Number(b.innerText));

// Join the array back into HTML
const outputHtml = elems.reduce((a, el) => a + el.outerHTML, "");

// Append HTML to parent container
document.getElementById('myDiv').innerHTML = outputHtml;

http://jsfiddle.net/g918jmoL/