Come posso ordinare un elenco in ordine alfabetico usando jQuery?

Sono un po 'fuori dalla mia profondità qui e spero che questo sia effettivamente possibile.

Mi piacerebbe poter chiamare una funzione che ordinerebbe alfabeticamente tutti gli elementi della mia lista.

Ho cercato nell'interfaccia utente di jQuery per l'ordinamento, ma non sembra essere quello. qualche idea?

Non hai bisogno di jQuery per fare questo ...

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 da usare...

sortUnorderedList("ID_OF_LIST");

Demo live →

Qualcosa come questo:

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

Da questa pagina: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Il codice sopra ordinerà il tuo elenco non ordinato con ID 'myUL'.

O puoi usare un plugin come 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;    
}

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

Per far funzionare tutto questo con tutti i browser incluso Chrome, devi rendere la funzione di callback di sort () restituita -1,0 o 1.

vedi 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 stai usando jQuery puoi farlo:

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

Si noti che la restituzione di 1 e -1 (o 0 e 1) dalla funzione di confronto è assolutamente errata .

La soluzione di @ SolutionYogi funziona come un incantesimo, ma sembra che l'utilizzo di $ .each sia meno semplice ed efficiente rispetto agli elenchi direttamente aggiunti:

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

miglioramento basato sulla risposta di Jeetendra Chauhan

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

perché lo considero un miglioramento:

1. usando eachper supportare l'esecuzione su più di un ul

2. l'utilizzo al children('li')posto di ('ul li')è importante perché vogliamo elaborare solo figli diretti e non discendenti

3. l'utilizzo della funzione freccia è (a,b)=>semplicemente migliore (IE non supportato)

4. usando la vaniglia innerTextanziché $(a).text()per migliorare la velocità

5. l'uso della vaniglia localeComparemigliora la velocità in caso di elementi uguali (raro nell'uso nella vita reale)

6. l'uso appendTo(this)invece di utilizzare un altro selettore farà in modo che anche se il selettore cattura più di un ul, non si rompe nulla

Stavo cercando di farlo da solo, e non ero soddisfatto di nessuna delle risposte fornite semplicemente perché, credo, sono tempi quadratici, e ho bisogno di farlo su liste lunghe centinaia di voci.

Ho finito per estendere jquery e la mia soluzione utilizza jquery, ma potrebbe essere facilmente modificata per utilizzare javascript direttamente.

Accedo a ciascun elemento solo due volte ed eseguo un ordinamento linearitmico, quindi penso che dovrebbe funzionare molto più velocemente su grandi set di dati, anche se confesso liberamente che potrei sbagliarmi lì:

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

Metti la lista in un array, usa JavaScript .sort(), che è di default in ordine alfabetico, quindi converti l'array in un elenco.

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

JSFiddle Demo https://jsfiddle.net/97oo61nw/

Qui stiamo spingendo tutti i valori degli lielementi all'interno ulcon specifici id(che abbiamo fornito come argomento di funzione) per array arre ordinarli usando il metodo sort () che è ordinato alfabeticamente per impostazione predefinita. Dopo che la matrice arrè stata ordinata, eseguiamo il ciclo di questa matrice usando il metodo forEach () e sostituiamo semplicemente il contenuto testuale di tutti gli lielementi con il contenuto ordinato