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

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

Gostaria de poder chamar uma function que classificaria todos os itens da minha lista em ordem alfabética.

Eu tenho procurado através da interface do usuário do jQuery para sorting, mas isso não parece ser. 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); }); 

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

O código acima classificará 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 esse trabalho funcione com todos os navegadores, incluindo o Chrome, você precisa fazer a function de retorno de chamada de sort () return -1,0 ou 1.

veja 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, você pode fazer isso:

 $(function() { var $list = $("#list"); $list.children().detach().sort(function(a, b) { return $(a).text().localeCompare($(b).text()); }).appendTo($list); }); 
  
  • delta
  • cat
  • alpha
  • cat
  • beta
  • gamma
  • gamma
  • alpha
  • cat
  • delta
  • bat
  • cat

A resposta do @ SolutionYogi funciona como um encanto, mas parece que usar $ .each é menos direto e eficiente do que listitems diretamente anexados:

 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

Eu estava olhando para fazer isso sozinho, e eu não estava satisfeito com qualquer uma das respostas fornecidas simplesmente porque, creio eu, eles são tempo quadrático, e eu preciso fazer isso na lista de centenas de itens de comprimento.

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

Eu só access cada item duas vezes, e executo uma sorting linear, portanto, acho que isso deve ser muito mais rápido em grandes conjuntos de dados, embora eu confesse livremente que poderia estar errado:

 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" + obj[sortedTexts[i]].html+""; } return htmlStr; }; this.html(processData(getData(this))); } } 

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

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

HTML

 
  • alpha
  • gamma
  • beta

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 nós empurramos todos os valores dos elementos li dentro de ul com id específico (que fornecemos como argumento de function) para array arr e classificá-lo usando o método sort () que é classificado alfabeticamente por padrão. Depois que o array arr é classificado, fazemos o loop desse array usando o método forEach () e apenas substituímos o conteúdo de texto de todos os elementos li pelo conteúdo classificado