我有点力不从心,我希望这是可能的。
我希望能够调用一个函数,该函数将按字母顺序对列表中的所有项进行排序。
我一直在寻找通过jQuery UI排序,但这似乎不是它。任何想法吗?
我有点力不从心,我希望这是可能的。
我希望能够调用一个函数,该函数将按字母顺序对列表中的所有项进行排序。
我一直在寻找通过jQuery UI排序,但这似乎不是它。任何想法吗?
当前回答
将列表放入一个数组中,使用JavaScript的.sort(),它默认是按字母顺序排列的,然后将数组转换回列表。
http://www.w3schools.com/jsref/jsref_sort.asp
其他回答
你不需要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");
现场演示→
@SolutionYogi的答案很有魅力,但似乎使用$。这两种方法都不如直接添加列表来得直接和有效:
var mylist = $('#list');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
mylist.empty().append(listitems);
小提琴
如果你正在使用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>
注意,从compare函数返回1和-1(或0和1)是绝对错误的。
$(".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
改进基于Jeetendra Chauhan的回答
$('ul.menu').each(function(){
$(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});
为什么我认为这是一个进步:
using each to support running on more than one ul using children('li') instead of ('ul li') is important because we only want to process direct children and not descendants using the arrow function (a,b)=> just looks better (IE not supported) using vanilla innerText instead of $(a).text() for speed improvement using vanilla localeCompare improves speed in case of equal elements (rare in real life usage) using appendTo(this) instead of using another selector will make sure that even if the selector catches more than one ul still nothing breaks