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的值数组？那么，当数组被排序时，我如何反映div中的变化？

Answer 1

您不能在NodeList上使用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;

http://jsfiddle.net/UydrZ/7/

当然，如果您正在使用jQuery，那将更容易。见jQuery - Sorting div contents

Answer 2

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

你可以做的是，首先将nodeList转换为数组而不是排序：

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

请注意，排序功能是可选的，并且在第一个值之后正常传递。（虽然，直接在您的元素列表中调用，.sort()将不会在没有函数参数的情况下对任何内容进行排序，因为它不会知道哪一个会在另一个之前出现）

结帐MDN call说明，了解这在场景背后是如何运作的：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Answer 3

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

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

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

Javascript - 排序div的集合

3 个答案: