Javascript-对div集合进行排序

我试图单独学习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>

---

我找不到这个问题的直接答案。

getElementsByClassName

是否返回具有该名称的每个div的值的数组？当数组被排序时，如何反映div中的变化？

您不能在节点列表上使用

sort（）

函数，这是通过调用

getElementsByClassName

实际得到的结果

var elems = document.getElementsByClassName("num");

// convert nodelist to array
var array = [];
for (var i = elems.length >>> 0; i--;) { 
    array[i] = elems[i];
}

// perform sort
array.sort(function(a, b) {
    return Number(a.innerHTML) - Number(b.innerHTML);      
});

// join the array back into HTML
var output = "";
for (var i = 0; i < array.length; i++) { 
    output += array[i].outerHTML;
}

// append output to div 'myDiv'
document.getElementById('myDiv').innerHTML = output;

var elems=document.getElementsByClassName（“num”）；
//将节点列表转换为数组
var数组=[]；
对于（var i=elems.length>>>0；i--；）{
数组[i]=元素[i]；
}
//执行排序
array.sort（函数（a，b）{
返回编号（a.innerHTML）-编号（b.innerHTML）；
});
//将数组重新连接到HTML中
var输出=”；
对于（var i=0；i

当然，如果您使用jQuery来实现这一点，它会更简单。

---

请参见问题在于

getElementsByClassName

返回的是

nodeList

，而不是数组。好的，我不得不说，这是非常愚蠢的，我仍然无法理解为什么浏览器会以这种方式实现它

不过，您可以先将

节点列表

转换为数组，然后再进行排序：

var elems = Array.prototype.slice.call(elements);
elems.sort(/* function (a, b) {} */);

请注意，排序函数是可选的，通常在第一个值之后传递。（尽管直接在元素列表上调用，

.sort（）

在没有函数参数的情况下不会对任何内容进行排序，因为它不知道哪个将在另一个之前）

---

签出MDN

call

description以了解这在幕后是如何工作的：

对节点进行排序并不是那么简单，您可能需要处理可能会遇到阻碍的其他节点。无论如何，这里有一个函数，它接受节点列表或HTMLCollection，将其转换为数组，对其进行排序，然后将节点重新排序。请注意，这些元素放回父元素的底部，因此任何其他元素都将位于顶部。无论如何，它展示了一种您可以适应的方法

还有许多其他方法，包括使用DOM方法的方法，请注意任何基于标记的方法。此外，请注意克隆元素，因为这可能会对侦听器产生不受欢迎的副作用（它们可能会被删除，也可能不会被删除，这取决于浏览器和它们的添加方式）

函数getText（el）{
返回el.textContent | | el.innerText |''；
}
功能分类元件（节点列表）{
//假设有一个共同的父母
变量节点，parentNode=nodeList[0]。parentNode
//定义一个排序函数
功能分拣机（a、b）{
var-aText=getText（a）；
var bText=getText（b）；
返回aText==bText？0:aText

这个网站不是教学网站，别指望我们教你javascript。我不是。我所要求的是一个问题的解决方案，我一直无法通过谷歌找到有用的答案。请在IE8中尝试。你不能像对待本机对象一样对待主机对象，它们不需要有行为。@RobG Right，更新了答案，先将

节点列表

转换为数组，然后排序。-这没有帮助，你仍然在将主机对象传递给内置方法，在IE 8中仍然会失败（以及主机对象与本机对象不一致的其他环境）。

var elems = Array.prototype.slice.call(elements);
elems.sort(/* function (a, b) {} */);

<script type="text/javascript">

function getText(el) {
  return el.textContent || el.innerText || '';
}

function sortElements(nodeList) {
  // Assume there's a common parent
  var node, parentNode = nodeList[0].parentNode

  // Define a sort function
  function sortEls(a, b) {
    var aText = getText(a);
    var bText = getText(b);
    return aText == bText? 0 : aText < bText? -1 : 1;
  }

  // Convert nodelist to an array and remove from the DOM at the same time
  var a = [], i = nodeList.length;
  while (i--) {
    a[i] = parentNode.removeChild(nodeList[i]);

  }

  // Sort the array
  a.sort(sortEls);

  // Put elements back in order
  i = 0;
  while (node = a[i++]) {
    parentNode.appendChild(node);
  }
}

</script>

<div>0</div>
<div>4</div>
<div>2</div>
<div>3</div>
<div>5</div>
<button onclick="sortElements(document.getElementsByTagName('div'))">Sort</button>