Comment puis-je trier une liste par ordre alphabétique en utilisant jQuery?

Vous n'avez pas besoin de jQuery pour faire cela …

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

Facile à utiliser…

 sortUnorderedList("ID_OF_LIST"); 

Démonstration en direct →

Quelque chose comme ça:

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

À partir de cette page: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Le code ci-dessus triera votre liste désordonnée avec id 'myUL'.

OU vous pouvez utiliser un plugin comme 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; } 

Démo en direct: http://jsbin.com/eculis/876/edit

Pour que ce travail fonctionne avec tous les navigateurs, y compris Chrome, vous devez effectuer la fonction de rappel de sort () return -1,0 ou 1.

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

Si vous utilisez jQuery, vous pouvez le faire:

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

@ La réponse de SolutionYogi fonctionne comme un charme, mais il semble que l'utilisation de $ .each soit moins directe et efficace que l'ajout direct de 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); 

Violon

J'ai utilisé TinySort pendant un certain temps et c'est léger et rapide. Il s'agit d'un plug-in jQuery mais maintenant c'est JS pur.

http://tinysort.sjeiti.com/

Je cherchais à le faire moi-même, et je n'étais pas satisfait de toutes les réponses fournies simplement parce que, je crois, ce sont des temps quadratiques, et je dois le faire sur des listes de centaines d'articles longtemps.

J'ai fini par étendre jquery, et ma solution utilise jquery, mais pourrait facilement être modifiée pour utiliser javascript direct.

Je n'accède à chaque élément que deux fois, et je réalise un seul type linéaire, donc je pense que cela devrait être beaucoup plus rapide sur de gros ensembles de données, même si je confesse volontiers que je peux me tromper:

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

Mettez la liste dans un tableau, utilisez JavaScript .sort() , qui est par défaut par ordre alphabétique, puis convertissez le tableau dans une liste.

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

Démo JSFiddle https://jsfiddle.net/97oo61nw/

Ici, nous supprimons toutes les valeurs des éléments li intérieur d' ul avec un id spécifique (ce que nous avons fourni comme argument de fonction) à array arr et trier en utilisant la méthode sort () qui est classée par ordre alphabétique par défaut. Une fois que array arr est trié, nous faisons boucle ce tableau en utilisant la méthode forEach () et remplaçons tout simplement le contenu du texte de tous les éléments li avec du contenu trié