¿Cómo puedo ordenar una lista alfabéticamente usando jQuery?

Estoy un poco fuera de mi alcance aquí y espero que esto sea realmente posible.

Me gustaría poder llamar a una función que ordenaría alfabéticamente todos los elementos de mi lista.

He estado buscando en la interfaz de usuario jQuery para ordenar, pero eso no parece ser así. ¿Alguna idea?

Usted no necesita jQuery para hacer esto ...

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

Fácil de usar...

sortUnorderedList("ID_OF_LIST");

Demostración en vivo →

Algo como esto:

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

Desde esta página: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

El código anterior ordenará su lista desordenada con la identificación 'myUL'.

O puede usar un complemento como 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;    
}

demostración en vivo: http://jsbin.com/eculis/876/edit

Para que este trabajo funcione con todos los navegadores, incluido Chrome, debe hacer que la función de devolución de llamada de sort () devuelva -1,0 o 1.

ver 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 está utilizando jQuery, puede hacer esto:

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

Tenga en cuenta que devolver 1 y -1 (o 0 y 1) de la función de comparación es absolutamente incorrecto .

@ Solución La respuesta de Yogi funciona de maravilla, pero parece que usar $ .each es menos sencillo y eficiente que agregar elementos de lista directamente:

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

Violín

mejora basada en la respuesta de Jeetendra Chauhan

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

por qué lo considero una mejora:

1. usando eachpara soportar correr en más de un ul

2. usar en children('li')lugar de ('ul li')es importante porque solo queremos procesar hijos directos y no descendientes

3. el uso de la función de flecha se (a,b)=>ve mejor (IE no es compatible)

4. usando vainilla en innerTextlugar de $(a).text()para mejorar la velocidad

5. el uso de vainilla localeComparemejora la velocidad en caso de elementos iguales (raro en el uso de la vida real)

6. usar en appendTo(this)lugar de usar otro selector se asegurará de que incluso si el selector atrapa más de un ul todavía no se rompe nada

Estaba buscando hacer esto yo mismo, y no estaba satisfecho con ninguna de las respuestas proporcionadas simplemente porque, creo, son de tiempo cuadrático, y necesito hacerlo en las listas de cientos de elementos.

Terminé extendiendo jquery, y mi solución usa jquery, pero podría modificarse fácilmente para usar JavaScript directo.

Solo accedo a cada elemento dos veces y realizo un tipo linealitmico, así que creo que esto debería funcionar mucho más rápido en grandes conjuntos de datos, aunque confieso libremente que podría estar equivocado allí:

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

Coloque la lista en una matriz, use JavaScript .sort(), que es alfabéticamente predeterminado, luego convierta la matriz nuevamente en una lista.

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

Demostración de JSFiddle https://jsfiddle.net/97oo61nw/

Aquí estamos empujando todos los valores de los lielementos dentro ulcon específicos id(que proporcionamos como argumento de función) para arrordenarlos y ordenarlos usando el método sort () que está ordenado alfabéticamente por defecto. Después de arrordenar la matriz, hacemos un bucle de esta matriz usando el método forEach () y simplemente reemplazamos el contenido de texto de todos los lielementos con contenido ordenado