Using Array.prototype.sort.call to sort a HTMLCollection
var down=function(a,b){alert(a)}
Array.prototype.s开发者_JAVA技巧ort.call(table.tBodies[0].childNodes,down)
Array.prototype.sort.call([0,1,2,3],down)
Why do I not get alerts from the first sort call?
Convert the NodeList
to an array first:
var elements = [].slice.call(table.tBodies[0].childNodes);
and then call sort
normally:
elements.sort(down);
It seems sort
cannot handle array-like objects. This is probably because NodeList
does not provide any methods to change the list, but sort
sorts the array in-place.
Update: For more information, from the specification:
Perform an implementation-dependent sequence of calls to the [[Get]] , [[Put]], and [[Delete]] internal methods of obj.
I assume NodeList
s don't have these internal methods. But this is really just an assumption. It could also be that this is implementation dependent.
I also suggest you use .children
[MDN] instead of .childNodes
to only get element nodes. Update: Or .rows
[DOM Spec] as @patrick suggests.
My proposal to sort an HTMLCollection is:
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>
I correct the code of gaetanoM, this one works with 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>
精彩评论