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

我在这里有点不知所措，我希望这是可能的

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

我一直在查看jQueryUI以进行排序，但似乎不是这样。有什么想法吗？

类似这样的想法：

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

从本页：

以上代码将对id为“myUL”的无序列表进行排序

或者你可以使用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];
}

$（“.list li”）.sort（asc_sort）.附录（“.list”）；
//$（“#调试”）.text（“输出：”；
//收尾排序
函数asc_排序（a，b）{
返回（$（b）.text（））<（$（a）.text（））？1:-1；
}
//递减排序
函数dec_排序（a，b）{
返回（$（b）.text（））>（$（a）.text（））？1:-1；
}

---

实时演示：

要使这项工作适用于包括Chrome在内的所有浏览器，您需要使sort（）的回调函数返回-1,0或1

看

功能排序（选择器）{
$（选择器）.children（“li”）.sort（函数（a，b）{
var upA=$（a.text（）.toUpperCase（）；
var upB=$（b.text（）.toUpperCase（）；
回报率（upAupB）？1:0；
}).附件（选择器）；
}
sortUL（“ul.mylist”）；

我想自己做这件事，但我对提供的任何答案都不满意，因为我相信它们是二次时间，我需要在数百个项目的列表上做这件事

我最终扩展了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)));
    }
}

sortList:function（）{
如果（！this.is（“ul”）| |！this.length）
返回
否则{
var getData=函数（ul）{
var lis=ul.find（'li'），
liData={
liTexts:[]
}; 
for（var i=0；i@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，可以执行以下操作：


$（函数（）{
var$list=$（“#list”）；
$list.children（）.detach（）.sort（函数（a，b）{
返回$（a.text（）.localeCompare（$（b.text（））；
}).附件（$清单）；
})；


三角洲
猫
阿尔法
猫
贝塔
伽马射线
伽马射线
阿尔法
猫
三角洲
球棒
猫
将列表放入数组中，使用JavaScript的
.sort（）
，默认情况下按字母顺序排列，然后将数组转换回列表

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

函数排序（ul）{
var ul=document.getElementById（ul）
var Liar=ul儿童
var arr=新数组（）
对于（变量i=0；i

JSFIDLE演示

这里我们使用特定的
id
（我们作为函数参数提供）将
li
元素的所有值推送到
ul
中要排列
arr
并使用默认按字母顺序排序的方法对其进行排序。在排列
arr
后，我们将使用方法循环此数组，并仅使用排序内容替换所有
li
元素的文本内容
根据用户的答案进行改进

为什么我认为这是一个进步：

使用
每个
支持在多个ul上运行

使用
children（'li'）
而不是
（'ul li'）
非常重要，因为我们只想处理直接子代，而不想处理子代

使用箭头功能
（a，b）=>
看起来更好（即不受支持）

使用香草
innerText
代替
$（a）.text（）
以提高速度

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

使用
appendTo（this）
而不是使用另一个选择器将确保即使选择器捕捉到多个ul，也不会有任何中断

最后一行是否可以替换为$（listitems）。appendTo（mylist）；？H.L.Menken有一句话描述了此解决方案：“对于每个问题，都有一个简单、优雅且错误的解决方案。”此过程在O（n^2）中运行时间。相对较短的列表不明显，但对于包含100多个元素的列表，完成排序需要3-4秒。@Nathan:About“对于每个问题，都有一个简单、优雅且错误的解决方案。”-好吧，一个错误的解决方案并不优雅。有些东西可以优雅迷人地观看，但仍然失败。优雅并不意味着成功。这个解决方案没有错。它回答了问题。OP没有指定他需要对超过100项的列表进行排序。如果他的列表永远不会超过100项，那么这个解决方案是完全可以接受的able.+1用于指出解决方案速度慢，-1用于将满足要求的解决方案声明为“错误”。请检查或。我发现这种方法的一个问题是，由于只移动文本，如果在排序之前使用jQuery.data将数据关联到DOM节点，那么这些关联现在是指向g在排序后转移到错误的节点。使用innerHTML移动元素是一个糟糕的解决方案，因为它们在排序后不是相同的元素。所有对元素的现有引用都将丢失。所有从JavaScript绑定的事件侦听器都将丢失。最好
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);

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

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

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