我在这里有点超出我的深度，我希望这实际上是可能的。
我希望能够调用一个函数来按字母顺序对列表中的所有项目进行排序。
我一直在浏览 jQuery UI 进行排序，但似乎并非如此。有什么想法吗？
如何使用 jQuery 按字母顺序对列表进行排序？
IT技术
javascript
jquery
dom
sorting
2021-02-01 07:27:56
6个回答
像这样的东西：
var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
从这个页面：http : //www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
上面的代码将使用 id 'myUL' 对您的无序列表进行排序。
或者你可以使用像 TinySort 这样的插件。https://github.com/Sjeiti/TinySort
你不会需要jQuery来做到这一点...
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
// Idiot-proof, remove if you want
if(!ul) {
alert("The UL object is null!");
return;
}
// Get the list items and setup an array for sorting
var lis = ul.getElementsByTagName("LI");
var vals = [];
// Populate the array
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
// Sort it
vals.sort();
// Sometimes you gotta DESC
if(sortDescending)
vals.reverse();
// Change the list on the page
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
便于使用...
sortUnorderedList("ID_OF_LIST");
$(".list li").sort(asc_sort).appendTo('.list');
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
return ($(b).text()) < ($(a).text()) ? 1 : -1;
}
// decending sort
function dec_sort(a, b){
return ($(b).text()) > ($(a).text()) ? 1 : -1;
}
现场演示：http : //jsbin.com/eculis/876/edit
为了使这项工作适用于包括 Chrome 在内的所有浏览器，您需要使 sort() 的回调函数返回 -1,0 或 1。
function sortUL(selector) {
$(selector).children("li").sort(function(a, b) {
var upA = $(a).text().toUpperCase();
var upB = $(b).text().toUpperCase();
return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);
}
sortUL("ul.mylist");
如果你使用 jQuery，你可以这样做：
$(function() {
var $list = $("#list");
$list.children().detach().sort(function(a, b) {
return $(a).text().localeCompare($(b).text());
}).appendTo($list);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="list">
<li>delta</li>
<li>cat</li>
<li>alpha</li>
<li>cat</li>
<li>beta</li>
<li>gamma</li>
<li>gamma</li>
<li>alpha</li>
<li>cat</li>
<li>delta</li>
<li>bat</li>
<li>cat</li>
</ul>请注意，从比较函数返回 1 和 -1（或 0 和 1）是绝对错误的。