Comment puis-je trier une liste Par Ordre alphabétique en utilisant jQuery?

je suis un peu hors de ma profondeur ici et j'espère que cela est possible.

j'aimerais pouvoir appeler une fonction qui classerait tous les articles de ma liste Par Ordre alphabétique.

j'ai cherché dans l'interface de jQuery pour le tri, mais ça ne semble pas être ça. Toutes les pensées?

222
demandé sur Shog9 2009-07-16 05:20:59

9 réponses

Vous ne 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");

Live Demo →

102
répondu Josh Stodola 2010-10-15 14:37:22

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 classée avec l'id 'myUL'.

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

316
répondu SolutionYogi 2014-03-06 09:56:41
$(".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;    
}

live demo: http://jsbin.com/eculis/876/edit

85
répondu Jeetendra Chauhan 2013-06-17 09:32:07

pour que ce travail fonctionne avec tous les navigateurs, y compris Chrome, vous devez utiliser 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
répondu PatrickHeck 2012-07-05 06:34:01

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>

noter que retourner 1 et -1 (ou 0 et 1) de la fonction de comparaison est absolument faux .

23
répondu Salman A 2017-05-23 10:31:09

la réponse de @SolutionYogi fonctionne comme un charme, mais il semble que l'utilisation de $.chacun est moins simple et efficace que les listes annexées directement:

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

6
répondu Buzut 2014-08-12 11:48:34

je cherchais à le faire moi-même, et je n'étais pas satisfait de l'une des réponses fournies simplement parce que, je crois, ils sont Temps quadratique, et je dois le faire sur des listes de centaines d'articles long.

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

Je n'accède à chaque objet que deux fois, et j'effectue un tri linéarithmique, donc cela devrait, je pense, s'avère être beaucoup plus rapide sur les grands ensembles de données, bien que je confesse librement que je pourrais être confondu là-bas:

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
répondu Quirkles 2014-03-15 03:49:26

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

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

0
répondu Elon Zito 2016-02-01 09:42:41

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 sommes poussons toutes les valeurs de li elements inside ul avec spécifique id (que nous avons fourni comme argument de fonction) au tableau arr et le trier en utilisant sort () méthode qui est triée alphabétique par défaut. Après le tableau arr est trié nous sommes boucle ce tableau en utilisant forEach () méthode et il suffit de remplacer le texte de tous les li éléments avec le contenu trié

0
répondu Mikhail 2016-10-24 15:12:32