Tôi có một bộ ba mục danh sách mà tôi muốn tự động hiển thị từ cao đến thấp khi tải trang. Lý tưởng nhất là sử dụng jquery hoặc javascript.Sắp xếp danh sách html với javascript
<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
Mỗi mục danh sách cần ID riêng vì mỗi mục danh sách đều có hình nền riêng. Các số phải có các nút văn bản để người dùng có thể chỉnh sửa chúng.
Điều này có lẽ sẽ là cách nhanh nhất để làm điều đó, vì nó không sử dụng 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);
}
Gọi chức năng như:
sortList(document.getElementsByClassName('list')[0]);
Bạn có thể sắp xếp danh sách khác theo cùng một cách và nếu bạn có các yếu tố khác trên cùng một trang với lớp danh sách, bạn nên cung cấp cho một id của bạn và chuyển nó vào bằng cách sử dụng thay vào đó.
Sửa
Vì bạn nói rằng bạn muốn nó xảy ra trên PageLoad, tôi giả sử bạn muốn nó xảy ra càng sớm càng tốt sau khi ul là trong DOM có nghĩa là bạn nên thêm chức năng sortList đến đầu trang của bạn và sử dụng nó ngay lập tức sau khi danh sách của bạn như thế này:
<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>
Điều đó thật đẹp - làm việc quyến rũ. Bây giờ để thử và disect những gì bạn đã viết ..! – danssker
Lưu ý: điều này sẽ không hoạt động trong các phiên bản của IE trước IE9 mà không cần thêm mã vì 'getElementsByClassName()' không tồn tại trong các phiên bản cũ của IE. – jfriend00
@danssker - Tại sao bạn chọn phiên bản javascript gốc phức tạp hơn phiên bản jQuery đơn giản hơn nếu bạn đã sử dụng jQuery? Bạn có thực sự thấy sự khác biệt về hiệu suất trên một hoạt động như thế này không? Câu thần chú của tôi trong vấn đề này là: đi với sự đơn giản đầu tiên và chỉ thêm sự phức tạp nếu bạn hoàn toàn cần nó. – jfriend00
Bạn có thể thử này
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);
});
Sống dụ: http://jsfiddle.net/B7hdx/1
sử dụng jQuery để được giúp đỡ:
var sortFunction = function(a, b) {
return (+($(b).text())) - (+($(a).text()));
}
var lis = $('ul.list li');
lis = Array.prototype.sort.call(lis, sortFunction);
for (var i = 0; i < lis.length; i++) {
$('ul.list').append(lis[i]);
}
Một phương pháp có thể để sort an array (tốt, một Đối tượng jQuery) của li yếu tố và thay thế nội dung (sử dụng phương pháp html) của ul với mảng được sắp xếp của các nguyên tố:
$(".list").html($(".list li").sort(function(a, b) {
return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);
}));
Dưới đây là một working example.
cảm ơn, có vẻ đẹp nhưng .. không chắc chắn mảng sắp xếp hoạt động đúng ở đây? trông giống như sắp xếp theo chữ số đầu tiên chứ không phải bởi giá trị thực tế. – danssker
bạn có thể sử dụng phương pháp này:
var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
Kiểm tra bài viết ở đây: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
Edit: Có một plugin jquery rất mát mẻ nào đó: http://tinysort.sjeiti.com/
Something như thế này sẽ giúp:
var $parent = $(".list");
$(".list li").sort(function (a, b) {
return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10);
}).remove().each(function() {
$parent.append($(this));
});
Mã này sẽ sắp xếp danh sách đó giả sử chỉ có một .list mục:
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");
Bạn có thể thấy nó hoạt động ở đây: http://jsfiddle.net/jfriend00/FjuMB/
Để giải thích cách hoạt động:
<li>.<li> đối tượng trẻ từ DOM, nhưng giữ gìn dữ liệu của họKết quả là chúng được hiển thị theo thứ tự được sắp xếp.
Edit:
phiên bản cải tiến này sẽ thậm chí loại nhiều đối tượng danh sách cùng một lúc:
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");
Sắp xếp jQuery bộ sưu tập như mảng thông thường và sau đó nối mỗi phần tử trở lại theo đúng thứ tự.
$(".list li").sort(function(a, b) {
return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);
}).appendTo('.list');
Ngoài ra còn có this small jQuery plugin.Mà sẽ làm cho sắp xếp của bạn không có gì hơn:
$('.list>li').tsort({attr:'id'});
bạn có thể sử dụng plugin jquery nhẹ này List.js nguyên nhân
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);
Non phiên bản jquery (vani javascript)
Lợi ích: danh sách được sắp xếp tại chỗ, mà không phá hủy của LI cũng không xóa mọi sự kiện có thể được liên kết với chúng. Nó chỉ shuffles những thứ xung quanh
Added một id cho UL:
<ul id="myList" class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
và vani javascript (không jquery)
// Grab a reference to the UL
var container = document.getElementById("myList");
// Gather all the LI's from the container
var contents = container.querySelectorAll("li");
// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
list.push(contents[i]);
}
// Sort based on innerHTML (sorts "in place")
list.sort(function(a, b){
var aa = parseInt(a.innerHTML);
var bb = parseInt(b.innerHTML);
return aa < bb ? -1 : (aa > bb ? 1 : 0);
});
// We'll reverse the array because our shuffle runs backwards
list.reverse();
// Shuffle the order based on the order of our list array.
for(var i=0; i<list.length; i++){
console.log(list[i].innerHTML);
container.insertBefore(list[i], container.firstChild);
}
Và bằng chứng fiddle: https://jsfiddle.net/L27gpnh6/1/
thấy ở đây http://stackoverflow.com/q/1134976/771300 –
@maerics Tôi đã thử bản gốc để xây dựng nó từ đầu với một mảng 'hàm listSort (a, B) { trả về a - b; } var n = ["10", "775", "40", "1125", "1", "8"]; document.write (n.sort (listSort)); ' Tôi đã sắp xếp lại danh sách theo thứ tự nhưng không thể tìm ra nó để làm việc với các ID danh sách khác nhau. – danssker