Comment puis-je trier une liste par ordre alphabétique à l'aide de jQuery?

Je suis un peu hors de ma profondeur ici et j'espère que c'est réellement possible.

J'aimerais pouvoir appeler une fonction qui trierait tous les éléments de ma liste par ordre alphabétique.

J'ai cherché dans l'interface jQuery pour le tri, mais cela ne semble pas être le cas. Des pensées?

Vous n'avez pas besoin de jQuery pour ce faire ...

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

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

Le code ci-dessus triera votre liste non ordonnée avec l'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 cela fonctionne avec tous les navigateurs, y compris Chrome, vous devez faire en sorte que la fonction de rappel de sort () renvoie -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>

Notez que renvoyer 1 et -1 (ou 0 et 1) à partir de la fonction de comparaison est absolument faux .

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

amélioration basée sur la réponse de Jeetendra Chauhan

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

pourquoi je considère cela comme une amélioration:

1. utilisation eachpour prendre en charge l'exécution sur plusieurs ul

2. utiliser children('li')au lieu de ('ul li')est important parce que nous voulons uniquement traiter les enfants directs et non les descendants

3. l'utilisation de la fonction flèche (a,b)=>semble juste meilleure (IE non pris en charge)

4. en utilisant de la vanille innerTextau lieu de $(a).text()pour améliorer la vitesse

5. l'utilisation de la vanille localeCompareaméliore la vitesse en cas d'éléments égaux (rare dans la vie réelle)

6. utiliser appendTo(this)au lieu d'utiliser un autre sélecteur s'assurera que même si le sélecteur attrape plus d'un ul toujours rien ne casse

Je cherchais à le faire moi-même, et je n'étais satisfait d'aucune des réponses fournies simplement parce que, je pense, elles sont quadratiques, et je dois le faire sur des listes de centaines d'articles.

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

Je n'accède à chaque élément que deux fois et j'effectue un tri linéaire, donc je pense que cela devrait être beaucoup plus rapide sur les grands ensembles de données, bien que j'avoue librement 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 alphabétique, puis reconvertissez le tableau en 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 poussons toutes les valeurs des liéléments à l'intérieur ulavec spécifique id(que nous avons fourni comme argument de fonction) pour le tableau arret le trier en utilisant la méthode sort () qui est triée alphabétiquement par défaut. Une fois le tableau arrtrié, nous bouclons ce tableau en utilisant la méthode forEach () et nous remplaçons simplement le contenu textuel de tous les liéléments par du contenu trié