Cómo ordenar alfabéticamente una lista en jQuery

Hace unos días Jay del Rio me dejo un comentario en Cómo ordenar alfabéticamente un combo en jQuery, preguntando cómo ordenar una lista, creo que es interesante que la respuesta sea un post para poder ayudar a más gente.

Hay varias formas y escenarios de ordenar una lista en jQuery, desde inyectar el HTML ordenado en el nodo contenedor hasta ordenar el JSON tras recibirlo en una API y luego renderizar.

En este caso, voy a tratar de hacerlo de la forma más elegante posible que me se ocurre para un caso intermedio, el descrito en el comentario de Jay: tiene una lista ya cargada y la debe ordenar con jQuery.

Ordenar ascendentemente una lista

Suponiendo que tenemos una lista con el ID “lista” y queramos ordenarla ascendentemente, esto funcionará:

$(document).ready(function(){
  $("ul#lista li").sort(sort_ascending).appendTo('ul#lista');
 
  function sort_ascending(a, b) {
    return ($(b).text()) < ($(a).text()) ? 1 : -1;       
  }
});
``` 


## Ordenar descendentemente una lista

Si en el mismo caso, queremos ordenarla descendentemente:

```js
$(document).ready(function(){
  $("ul#lista li").sort(sort_descending).appendTo('ul#lista');
 
  function sort_descending(a, b) {     
    return ($(b).text()) > ($(a).text()) ? 1 : -1;    
  }
});

Ordenar alfabéticamente una lista con jQuery

Juntando ambas opciones y refactorizando un poco para no usar IDs y aplicar el orden en base a clases:

$(document).ready(function(){
  $("ul.asc li").sort(sort_ascending).appendTo('ul.asc');
  $("ul.desc li").sort(sort_descending).appendTo('ul.desc');
 
  function sort_ascending(a, b) {
    return ($(b).text()) < ($(a).text()) ? 1 : -1;       
  }   
 
  function sort_descending(a, b) {     
    return ($(b).text()) > ($(a).text()) ? 1 : -1;    
  }
});

Con esto, cualquier lista que tenga la clase asc se ordenará ascendentemente y las listas que tengan la clase desc se ordenaran descendentemente.

Ejemplo en vivo

He creado un Plunker para que podáis ver y modificar un ejemplo online, siéntete libre de modificarlo.

Si tenéis cualquier sugerencia o duda, escribirla a continuación e intentaré ayudarte 🙂