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”
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…
Hola,
El codigo que propones no me ha funcionado, este de aquí si:
http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/
Tambien es importante notar que sort en un objecto jquery solo funciona a partir de la version 1.3.2, que yo tenía la 1.3.1 y me estaba haciendo la picha un lio.
Gracias!
Gracias por el aporte, hace tiempo que no uso algo en 1.3.1 y ni me había dado cuenta. 🙂
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!
Si eso he visto. Es un sistema un poco liado pero supongo que como dices es por la versión.