Seleccionar página

Snippet en  jQuery que ordena elementos por orden alfabético.

Clasifica alfabéticamente por apellido, divs que contienen nombres de personas.
Obtiene nombre y apellidos del nombre de la clase css. También se podría obtener a partir de datos de un atributo.

See the Pen Alphabetical order by blanco (@_blanco) on CodePen.

HTML

<div class="ordre-alfabetic">
  
    <div class="box @Cervantes_Miguel">
        Miguel de <i>Cervantes Saavedra</i>
    </div> 
    <div class="box @García_Federico">
        Federico <i>García Lorca</i>
    </div> 
    <div class="box @Quevedo_Francisco">
        Francisco de <i>Quevedo</i>
    </div>
    <div class="box @Bécquer_Gustavo">
        Gustavo Adolfo <i>Bécquer</i>
    </div>
    <div class="box @Machado_Antonio">
        Antonio <i>Machado</i>
    </div>  
    
    ... ... 
    
</div>

 

jQuery

$(document).ready(function() {
    var $list = $('.ordre-alfabetic');
    var $listItem = $('.box', $list);
    $('#sort').on('click', function() {
        $listItem.sort(function(a, b) {
            var text_a = getCognoms(a);
            var text_b = getCognoms(b);
            return (text_a & amp; gt; text_b) ? 1 : -1
        }).each(function() {
            var elem = $(this);
            elem.remove();
            $(elem).appendTo($list);
        });
    });

    function getCognoms(el) {
        var cognom = $.grep($(el).attr("class").toString().split(' '), function(v, i) {
            return v.indexOf('@') === 0;
        }).join();
        return $.trim(cognom.replace(/[@_]/g, ' '));
    }
});

 

Es posible que necesite un navegador moderno para ver este contenido correctamente