web-dev-qa-db-fra.com

Comment puis-je trier une liste alphabétiquement en utilisant 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 par ordre alphabétique tous les éléments de ma liste.

J'ai jeté un œil sur l'interface utilisateur de jQuery pour trier mais cela ne semble pas être le cas. Des pensées?

javascriptjquerydomsorting
226
dougoftheabaci

Vous avez pas besoin de jQuery pour le 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 →

102
Josh Stodola

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

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

Le code ci-dessus va trier votre liste non ordonnée avec l'id 'myUL'. 

OU vous pouvez utiliser un plugin comme TinySort. https://github.com/Sjeiti/TinySort

318
SolutionYogi
$(".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

85
Jeetendra Chauhan

Pour que cela fonctionne avec tous les navigateurs, y compris Chrome, vous devez activer 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");
39
PatrickHeck

Si vous utilisez jQuery, vous pouvez faire ceci:

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

27
Salman A

La réponse de @ SolutionYogi fonctionne à merveille, mais il semble que l'utilisation de $ .each soit moins simple et efficace que l'ajout direct de listes de diffusion:

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

Fiddle

6
Buzut

Je cherchais à le faire moi-même et je n’étais satisfait d’aucune des réponses fournies simplement parce que, je crois, c’est du temps quadratique, et je dois le faire sur des listes de centaines de points.

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 que deux fois à chaque élément et effectue un tri linéaire, de sorte que cela devrait, je pense, être beaucoup plus rapide pour les grands ensembles de données, même si je l'avoue volontiers, je pourrais m'y 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)));
    }
}
0
Quirkles

Placez la liste dans un tableau, utilisez la fonction .sort() de JavaScript, qui est alphabétique par défaut, puis convertissez le tableau en liste.

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

0
Elon Zito

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/

Ici, nous poussons toutes les valeurs des éléments li à l'intérieur de ul avec un id spécifique (que nous avons fourni en tant qu'argument de fonction) dans le tableau arr et le trie à l'aide de sort () qui est trié par ordre alphabétique. Une fois que le tableau arr est trié, nous bouclons ce tableau en utilisant forEach () method et nous ne faisons que remplacer le contenu textuel de tous les éléments li par du contenu trié.

0
Mikhail