Como posso classificar uma lista em ordem alfabética usando o jQuery?

Estou um pouco fora da minha profundidade aqui e espero que isso seja realmente possível.

Eu gostaria de poder chamar uma função que classificaria todos os itens da minha lista em ordem alfabética.

Eu estive procurando na interface do usuário do jQuery para classificar, mas isso não parece ser o caso. Alguma ideia?

Você não precisa do jQuery para fazer isso ...

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

Fácil de usar...

sortUnorderedList("ID_OF_LIST");

Demonstração ao vivo →

Algo assim:

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

Nesta página: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

O código acima ordenará sua lista não ordenada com o ID 'myUL'.

OU você pode usar um plugin como o TinySort. https://github.com/Sjeiti/TinySort

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

demonstração ao vivo: http://jsbin.com/eculis/876/edit

Para que este trabalho funcione com todos os navegadores, incluindo o Chrome, você precisa fazer com que a função de retorno de chamada de sort () retorne -1,0 ou 1.

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

Se você estiver usando o jQuery, poderá fazer o seguinte:

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

Observe que retornar 1 e -1 (ou 0 e 1) da função de comparação está absolutamente errado .

A resposta da @ SolutionYogi funciona como um encanto, mas parece que o uso de $ .each é menos direto e eficiente do que os itens de lista anexados diretamente:

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

Violino

melhoria baseada na resposta de Jeetendra Chauhan

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

por que considero uma melhoria:

1. usando eachpara suportar a execução em mais de um ul

2. usar em children('li')vez de ('ul li')é importante porque só queremos processar filhos diretos e não descendentes

3. usar a função de seta (a,b)=>parece melhor (IE não suportado)

4. usando baunilha em innerTextvez de $(a).text()para melhorar a velocidade

5. usar baunilha localeComparemelhora a velocidade em caso de elementos iguais (raro no uso na vida real)

6. usar em appendTo(this)vez de usar outro seletor garantirá que, mesmo que o seletor capte mais de um ul, nada seja interrompido

Eu estava tentando fazer isso sozinho e não estava satisfeito com nenhuma das respostas fornecidas simplesmente porque, acredito, são tempos quadráticos, e preciso fazer isso em listas com centenas de itens.

Acabei estendendo o jquery e minha solução usa o jquery, mas poderia ser facilmente modificado para usar o javascript direto.

Eu só acesso cada item duas vezes e realizo uma classificação linearitmica, portanto, acho que isso deve ser muito mais rápido em grandes conjuntos de dados, embora eu confesse livremente que poderia estar enganado:

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

Coloque a lista em uma matriz, use JavaScript .sort(), que por padrão é alfabético, depois converta a matriz novamente em uma lista.

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

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 Demo https://jsfiddle.net/97oo61nw/

Aqui, pressionamos todos os valores dos lielementos ulcom específico id(que fornecemos como argumento da função) para arrordenar e classificar usando o método sort () , que é classificado alfabeticamente por padrão. Depois que a matriz arré classificada, fazemos um loop nessa matriz usando o método forEach () e apenas substituímos o conteúdo de texto de todos os lielementos pelo conteúdo classificado