Javascript - 排序div的集合

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

你不能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内容进行排序