使用Array.prototype.sort.call对HTMLCollection进行排序
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Array.prototype.sort.call对HTMLCollection进行排序相关的知识，希望对你有一定的参考价值。
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)
为什么我没有收到第一次打电话的提醒？
答案
首先将NodeList转换为数组：
var elements = [].slice.call(table.tBodies[0].childNodes);
然后通常调用sort：
elements.sort(down);
似乎sort无法处理类似数组的对象。这可能是因为NodeList没有提供任何方法来更改列表，但sort就地对阵列进行排序。
更新：有关更多信息，请访问specification：
执行依赖于实现的调用序列，调用obj的[[Get]]，[[Put]]和[[Delete]]内部方法。
我假设NodeLists没有这些内部方法。但这只是一个假设。也可能是这取决于实现。
我还建议你使用.children [MDN]而不是.childNodes来获取元素节点。更新：或@patrick建议的.rows [DOM Spec]。
另一答案
我对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>另一答案
我更正了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>以上是关于使用Array.prototype.sort.call对HTMLCollection进行排序的主要内容，如果未能解决你的问题，请参考以下文章
在使用加载数据流步骤的猪中，使用（使用 PigStorage）和不使用它有啥区别？
Qt静态编译时使用OpenSSL有三种方式（不使用，动态使用，静态使用，默认是动态使用）