這可能會做的最快的方法,因爲它不使用jQuery:
function sortList(ul){
var new_ul = ul.cloneNode(false);
// Add all lis to an array
var lis = [];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI')
lis.push(ul.childNodes[i]);
}
// Sort the lis in descending order
lis.sort(function(a, b){
return parseInt(b.childNodes[0].data , 10) -
parseInt(a.childNodes[0].data , 10);
});
// Add them into the ul in order
for(var i = 0; i < lis.length; i++)
new_ul.appendChild(lis[i]);
ul.parentNode.replaceChild(new_ul, ul);
}
呼叫的功能等:
sortList(document.getElementsByClassName('list')[0]);
您可以按其他列表以同樣的方式,如果你在列表類的同一頁面上有其他元素,你應該給你的ul一個id,然後用它來傳遞它。
Example JSFiddle
編輯
既然你提到你希望它在頁面加載發生,我假設你想後UL是,這意味着你應該添加DOM它儘快發生功能sortList
到你的頁面的頭部,然後將列表後立即使用它像這樣:
<head>
...
<script type="text/javascript">
function sortList(ul){
var new_ul = ul.cloneNode(false);
var lis = [];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI')
lis.push(ul.childNodes[i]);
}
lis.sort(function(a, b){
return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
});
for(var i = 0; i < lis.length; i++)
new_ul.appendChild(lis[i]);
ul.parentNode.replaceChild(new_ul, ul);
}
</script>
</head>
<body>
...
<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
<script type="text/javascript">
!function(){
var uls = document.getElementsByTagName('ul');
sortList(uls[uls.length - 1]);
}();
</script>
...
</body>
看到這裏 http://stackoverflow.com/q/1134976/771300 – 2012-01-12 15:08:00
@maerics我嘗試originaly從頭開始構建它與數組 'function listSort(a,B) { return a -b; } var n = [「10」,「775」,「40」,「1125」,「1」,「8」]; document.write(n.sort(listSort));' 我得到儘可能按順序重新排列列表,但不能指望它與不同的列表ID一起工作。 – danssker 2012-01-12 17:21:54