dan*_*ker 14 html javascript sorting jquery html-lists
我有一组三个列表项,我想在页面加载时从高到低自动显示.理想情况下使用jquery或javascript.
<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
每个列表项都需要自己的ID,因为它们每个都有单独的背景图像.数字必须是文本节点,以便用户可以编辑它们.
Pau*_*aul 17
这可能是最快的方法,因为它不使用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并将其传递给它.
编辑
既然你提到你希望它发生在pageLoad上,我假设你希望它在DOM在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>
还有这个小的 jQuery 插件。这将使您的排序无非是：
$('.list>li').tsort({attr:'id'});
你可以使用这个轻量级的jquery插件List.js原因
HTML
<div id="my-list">
<ul class="list">
<li>
<h3 class="name">Luke</h3>
</li>
<li>
<h3 class="name">John</h3>
</li>
</ul>
</div>
使用Javascript
var options = {
valueNames: ['name']
};
var myList = new List('my-list', options);
你可以试试这个
var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));
arr.sort(function(a, b) {
var textA = +$(a).text();
var textB = +$(b).text();
if (textA < textB) return -1;
if (textA > textB) return 1;
return 0;
});
ul.empty();
$.each(arr, function() {
ul.append(this);
});
实例:http://jsfiddle.net/B7hdx/1
假设只有一项，此代码将对该列表进行排序.list：
function sortList(selector) {
var parent$ = $(selector);
parent$.find("li").detach().sort(function(a, b) {
return(Number(a.innerHTML) - Number(b.innerHTML));
}).each(function(index, el) {
parent$.append(el);
});
}
sortList(".list");
您可以在这里看到它的工作原理：http ://jsfiddle.net/jfriend00/FjuMB/
解释一下它是如何工作的：
<li>子对象。<li>它从 DOM 中删除所有子对象，但保留它们的数据结果是它们按排序顺序显示。
编辑：
这个改进的版本甚至可以一次对多个列表对象进行排序：
function sortList(selector) {
$(selector).find("li").sort(function(a, b) {
return(Number(a.innerHTML) - Number(b.innerHTML));
}).each(function(index, el) {
$(el).parent().append(el);
});
}
sortList(".list");
演示： http: //jsfiddle.net/jfriend00/RsLwX/