ordenar alfabeticamente elementos del html con jquery


Este es un problema que me encontré este fin de semana. Selects enormes de los que no se puede tocar la fuente y que hay que ordenar por temas de usabilidad alfabéticamente. Nada más sencillo que recurrir a javascript y usar el metodo nativo «sort» de los arrays.

Un ejemplo ayudándonos, como nó, de jquery. Imáginemos que el select en cuestión tiene el id «selectAlfabetico». Con un código tan sencillo como el que sigue dejaríamos las opciones ordenadas alfabéticamnete.

ops = $("select#selectAlfabetico option");
// esta funcion compara todos los elementos del array
// si devolvemos true "a" irá antes, 
// si devolvemos false "b" irá antes.
ops.sort(function (a,b) {
  return ( $(a).html().toUpperCase() < $(b).html().toUpperCase() ) ? -1 : ( $(a).html().toUpperCase() > $(b).html().toUpperCase() ) ? 1 : 0;
});
html="";
for(i=0;i" + $(op[i]).html() + "";	
}
$("select#selectAlfabetico").html(html);

Sencillo verdad? Pues este método podríamos aplicarlo fácilmente a cualquier serie de elementos html: listados, divs, párrafos… Sólo habría que cambiar la función short y el loop para generar el html.

Términé, hoy he sido corto y discreto.


6 respuestas a “ordenar alfabeticamente elementos del html con jquery”

  1. Un detalle: sort ya devuelve en alfabético por defecto, sin la función. Las funciones se requieren si hay valores numéricos, pues si no pasa que el número 30 va antes que el 4.

    • Si, cuando hablamos de un array simple, podemos ordenar su contenido usando sort sin pasar parámetros y en esos casos no va a ser necesario complicarse la vida. Es un buen detalle comentarlo.

      Sin embargo, para volver al tema de elementos html, si lo que queremos es ordenar un array más profundo como es el que devuelve jquery, y ordenar por algún atributo del html o por el resultado de alguna función, como sale en el ejemplo. Necesitamos indicar en la función como extraer los valores a comparar.

      En el ejemplo el uso de la función es simplemente para indicar que los valores a comparar serán el resultado de «.html()» de cada uno de los elementos extraídos por jquery. En otros casos podríamos usar el resultado de «.val()», el de «.attr()». Dependiendo de lo que queramos…

  2. por cierto, me acabo de dar cuenta que el articulo que enlazo deben trabajar con una versión anterior a la 1.3.2 ya que usa el metodo sort en objetos javascript, primero extrae los objetos js con el get(), hace la comparación, y después lo vuelve a añadir con el append(). Esta mañana me limité a copiar su línea del return (la comparación), y no había caído en ello.

    Venga saludos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *