Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Javascript / Jquery: Ordenación alfabética de elementos

Datos de búsqueda

Javascript / Jquery: Ordenación alfabética de elementos

He preparado un plugin de Jquery (un poco rudimentario) para ordenar elementos de lista de forma alfabética.

Para hacer el script me he basado en una función expuesta en StackOverflow – How may I sort a list alphabetically using jQuery? (enlace externo, en inglés).

En la función original se genera un array con los elementos de lista y se le aplica el método sort() para ordenarlos alfabéticamente.

Una vez terminado el plugin surgía un problema: Si la cadena de texto del elemento ordenable empieza con una letra minúscula o con acento, dicho elemento aparecía al final. Para solventarlo he utilizado un array multidimensional, que contiene la cadena de texto original, y una variación convertida a minúsculas y sin acentos:

Código HTML

Ver ejemplo (abre en ventana nueva)

HTML del listado:

<ul id="listado">
  <li class="elemento">Madrid</li>
  <li class="elemento">Valladolid</li>
  <li class="elemento">Palencia</li>
  <li class="elemento">Álava</li>
  <li class="elemento">Lérida</li>
  <li class="elemento">burgos</li>
  <li class="elemento">Cantabria</li>
</ul>

Aunque en el ejemplo se está haciendo con una lista desordenada también se puede hacer con otros elementos.

HTML de los enlaces de ordenación:

<p><a href="#" id="ordenar1">Ordenar A-Z</a></p>
<p><a href="#" id="ordenar2">Ordenar Z-A</a></p>

Código Javascript

Asignación de eventos a los enlaces

$('#ordenar1').ordenacion();
$('#ordenar2').ordenacion({delReves:true});

La opción delReves (valores true o false) determina si la ordenación es descendente o no.

Código del plugin Jquery:

(function($){
  $.fn.ordenacion = function(options){
    var defaults = { // Opciones por defecto
      contenedor: '#listado'
      ,elementoOrdenable: '.elemento'
      ,delReves: false
    }
    var op = $.extend(defaults, options);

    return this.each(function(){
      var enlace = $(this);
      enlace.click(function (event) {
        event.preventDefault();
        ordenar();
      });
      
    });
    
    function ordenar () {
      var contenedor = $(op.contenedor).eq(0);
      var ordenables = contenedor.find(op.elementoOrdenable);
      
      var vals = [];
      
      ordenables.each(function () {
        var html = $(this).html();
        var htmlCambiado = html.toLowerCase();
        vals.push([tildes(htmlCambiado),html]);
      });
      
      vals.sort();
      if(op.delReves) {vals.reverse();}
      
      ordenables.each(function (i) {
        $(this).html(vals[i][1]);
      });
    }
    
    function tildes(t){
      var ts = '';
      for(var i=0;i<t.length;i++) {
        var c = t.charCodeAt(i);
        if(c >= 224 && c <= 230) {ts += 'a';}
        else if(c >= 232 && c <= 235) {ts += 'e';}
        else if(c >= 236 && c <= 239) {ts += 'i';}
        else if(c >= 242 && c <= 246) {ts += 'o';}
        else if(c >= 249 && c <= 252) {ts += 'u';}
        else {ts += t.charAt(i);}
      }
    return ts;
    };
  }
})(jQuery);

Saber más

Enlaces externos:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Javascript / Jquery: Ordenación alfabética de elementos”

David dice:

Fecha de comentario: 2013/10/24 17:01

hola, se que esto fue publicado hace mucho tiempo pero supongo que igual le llegara este mensage.

tengo el problema de que me gustaria que en este script me saliera ordenados los links generados alfabeticamente y no lo consigo.

me podrias ayuda?

function recentpostslist(json) {
document.write(”);
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'"; //bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "” + “‘ + entryTitle + “ “;

document.write(item);
}

document.write(”);
}

Pasta rellena

Sopa

Tofu

Información del sitio