使用Array.prototype.sort.call对HTMLCollection进行排序

时间:2011-08-14 19:16:44

标签: javascript google-chrome

var down=function(a,b){alert(a)}
Array.prototype.sort.call(table.tBodies[0].childNodes,down)
Array.prototype.sort.call([0,1,2,3],down)

为什么我没有收到第一次排序电话的提醒?

3 个答案:

答案 0 :(得分:9)

首先将NodeList转换为数组:

var elements = [].slice.call(table.tBodies[0].childNodes);

然后正常致电sort

elements.sort(down);

似乎sort无法处理类似数组的对象。这可能是因为NodeList没有提供任何方法来更改列表,但是sort对数组进行了就地排序

更新:有关详细信息,请参阅specification

  

执行依赖于实现的调用序列,调用 obj 的[[Get]],[[Put]]和[[Delete]]内部方法。

我认为NodeList没有这些内部方法。但这只是一个假设。也可能是这取决于实现。

我还建议您使用.children [MDN]而不是.childNodes来获取元素节点。 更新:.rows [DOM Spec]正如@patrick建议的那样。

答案 1 :(得分:5)

我对HTMLCollection进行排序的建议是:

window.onload = function() {
  var parentNode = document.getElementById('test-list');
  var e = document.getElementById('test-list').children;
  [].slice.call(e).sort(function(a, b) {
    return a.textContent.localeCompare(b.textContent);
  }).forEach(function(val, index) {
    parentNode.appendChild(val);
  });
}
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

答案 2 :(得分:1)

我更正了gaetanoM的代码,这个代码适用于IE:

window.onload = function() {
  var parentNode = document.getElementById('test-list');
  var e = document.getElementById('test-list').children;
  [].slice.call(e).sort(function(a, b) {
  	if (a.textContent > b.textContent) return 1;
  if (a.textContent < b.textContent) return -1;
  return 0;
   }).forEach(function(val) {
    parentNode.appendChild(val);
  });
}
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
    <li class="lang">Tata</li>
    <li class="lang">Aaaaa</li>
    <li class="lang">Drue</li>
</ol>