如何使用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> 

请注意，从compare函数返回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

我一直想自己做这个，我对所提供的任何答案都不满意，因为我认为它们是二次时间，并且我需要在清单上的数百个项目中做到这一点。

我最终扩展了jquery，并且我的解决方案使用了 jquery，但可以轻松地对其进行修改以使用纯JavaScript。

我只访问每个项目两次，并执行一次线性排序排序，因此，我认为这样做应该可以在大型数据集上更快地完成工作，尽管我自由地承认我可能会在这里犯错误：

sortList: function() {
   if (!this.is("ul") || !this.length)
      return
   else {
      var getData = function(ul) {
         var lis     = ul.find('li'),
             liData  = {
               liTexts : []
            }; 

         for(var i = 0; i<lis.length; i++){
             var key              = $(lis[i]).text().trim().toLowerCase().replace(/\s/g, ""),
             attrs                = lis[i].attributes;
             liData[key]          = {},
             liData[key]['attrs'] = {},
             liData[key]['html']  = $(lis[i]).html();

             liData.liTexts.push(key);

             for (var j = 0; j < attrs.length; j++) {
                liData[key]['attrs'][attrs[j].nodeName] = attrs[j].nodeValue;
             }
          }

          return liData;
       },

       processData = function (obj){
          var sortedTexts = obj.liTexts.sort(),
              htmlStr     = '';

          for(var i = 0; i < sortedTexts.length; i++){
             var attrsStr   = '',
                 attributes = obj[sortedTexts[i]].attrs;

             for(attr in attributes){
                var str = attr + "=\'" + attributes[attr] + "\' ";
                attrsStr += str;
             }

             htmlStr += "<li "+ attrsStr + ">" + obj[sortedTexts[i]].html+"</li>";
          }

          return htmlStr;

       };

       this.html(processData(getData(this)));
    }
}

Answer 8

将列表放入数组中，使用JavaScript的.sort() （默认情况下按字母顺序），然​​后将数组转换回列表。

http://www.w3schools.com/jsref/jsref_sort.asp

Answer 9

的HTML

<ul id="list">
    <li>alpha</li>
    <li>gamma</li>
    <li>beta</li>
</ul>

的JavaScript

function sort(ul) {
    var ul = document.getElementById(ul)
    var liArr = ul.children
    var arr = new Array()
    for (var i = 0; i < liArr.length; i++) {
        arr.push(liArr[i].textContent)
    }
    arr.sort()
    arr.forEach(function(content, index) {
        liArr[index].textContent = content
    })
}

sort("list")

JSFiddle演示https://jsfiddle.net/97oo61nw/

在这里，我们将ul具有特定id （我们作为函数参数提供）的li元素的所有值推送到数组arr ，并使用sort（）方法对其进行排序 ，该方法默认情况下按字母顺序排序。 对数组arr进行排序后，我们使用forEach（）方法循环该数组，并仅将所有li元素的文本内容替换为已排序的内容

Answer 10

基于Jeetendra Chauhan的答案的改进

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

为什么我认为这是一种改进：

1. 使用each来支持在一个以上的ul上运行

2. 使用children('li')代替('ul li')很重要，因为我们只想处理直接的子代，而不要处理后代

3. 使用箭头功能(a,b)=>看起来更好（不支持IE）

4. 使用香草innerText代替$(a).text()提高速度

5. 在元素相等的情况下使用香草localeCompare可以提高速度（在现实生活中很少使用）

6. 使用appendTo(this)而不是使用另一个选择器将确保即使选择器捕获了多个ul，也不会中断