使用 javascript 對 html 列表進行排序
[英]Sort an html list with javascript
問題描述
我有一組三個列表項，我想在頁面加載時從高到低自動顯示。 理想情況下使用 jquery 或 javascript。
<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
每個列表項都需要自己的 ID，因為它們每個都有單獨的背景圖像。 數字必須是文本節點，以便用戶可以編輯它們。
11 個解決方案
解決方案1
22 已采納 2012-01-12 15:09:47
這可能是最快的方法，因為它不使用 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 上發生，我假設你希望它在 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>
解決方案2
6 2012-08-03 14:34:57
你可以使用這個輕量級的 jquery 插件List.js原因
- 它是輕量級的 [只有 3K 腳本]
- 易於使用類在現有的 HTML 表中實現
- 可搜索、可排序和可過濾
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);
解決方案3
6 2012-02-06 20:42:26
還有這個小的 jQuery 插件。 這將使您的排序無非是：
$('.list>li').tsort({attr:'id'});
解決方案4
5 2012-01-12 15:07:18
你可以試試這個
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
解決方案5
4 2012-01-12 15:19:09
假設只有一個.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/
解釋它是如何工作的：
- 它獲取 .list 父對象。
- 它找到所有
<li>子對象。 - 它從 DOM 中刪除所有
<li>子對象，但保留它們的數據 - 它使用自定義排序函數對 li 對象進行排序
- 自定義排序函數獲取li標簽中的HTML並將其轉換為數字
- 然后，以新排序的順序遍歷數組，將每個 li 標記附加回原始父級。
結果是它們按排序順序顯示。
編輯：
這個改進的版本甚至可以一次對多個列表對象進行排序：
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");
解決方案6
3 2015-06-26 15:14:25
非 jquery 版本（vanilla javascript）
優點：列表按原位排序，不會破壞 LI，也不會刪除任何可能與它們相關聯的事件。 它只是洗牌
向 UL 添加了一個 id：
<ul id="myList" class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>
和 vanilla javascript（沒有 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);
}
和小提琴證明： https : //jsfiddle.net/L27gpnh6/1/
解決方案7
1 2012-01-12 15:09:41
解決方案8
1 2012-01-12 15:10:50
您可以使用此方法：
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); });
在此處查看文章： http : //www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
編輯：有一個非常酷的 jquery 插件可以做到這一點： http : //tinysort.sjeiti.com/
解決方案9
1 2012-01-12 15:11:10
這樣的事情應該有幫助：
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));
});
解決方案10
0 2012-01-12 15:08:51
使用 jQuery 尋求幫助：
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]);
}
解決方案11
0 2012-01-12 15:27:42
像往常一樣對 jQuery 集合進行排序，然后以正確的順序附加每個元素。
$(".list li").sort(function(a, b) {
return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);
}).appendTo('.list');
嘗試使用javascript對我的html中的列表進行排序
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.