5

我正在尝试单独学习 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 中的更改？

4

3 回答 3

5

您不能sort()在 NodeList 上使用该函数，这是您通过调用实际得到的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 - 对 div 内容进行排序

于 2013-06-04T04:05:05.557 回答
0

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

但是，您可以做的是首先将 转换nodeList为数组，然后进行排序：

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

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

查看 MDNcall描述以了解这在幕后是如何工作的：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

于 2013-06-04T04:05:19.457 回答
0

对节点进行排序并不是那么简单，您可能需要处理可能会妨碍您的其他节点。无论如何，这是一个接受 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>
于 2013-06-04T05:26:34.547 回答