如何使用jQuery按字母顺序对列表进行排序？

Question

我有点超出我的深度,我希望这实际上是可能的.

我希望能够调用一个按字母顺序对列表中所有项目进行排序的函数.

我一直在浏览jQuery UI进行排序,但似乎不是这样.有什么想法吗？

Answer 1

像这样的东西:

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

Answer 2

你不会需要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");

现场演示→

Answer 3

$(".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

Answer 4

要使此工作适用于所有浏览器(包括Chrome),您需要使sort()的回调函数返回-1,0或1.

见http://inderpreetsingh.com/2010/12/01/chromes-javascript-sort-array-function-is-different-yet-proper/

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");

Answer 5

如果你使用的是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)是绝对错误的.

Answer 6

@ SolutionYogi的答案就像魅力一样,但似乎使用$ .each比直接附加listitems更简单有效:

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);

小提琴

Answer 7

improvement based on Jeetendra Chauhan's answer

$('ul.menu').each(function(){
    $(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});

why i consider it an improvement:

1. using each to support running on more than one ul

2. using children('li') instead of ('ul li') is important because we only want to process direct children and not descendants

3. using the arrow function (a,b)=> just looks better (IE not supported)

4. using vanilla innerText instead of $(a).text() for speed improvement

5. using vanilla localeCompare improves speed in case of equal elements (rare in real life usage)

6. using appendTo(this) instead of using another selector will make sure that even if the selector catches more than one ul still nothing breaks