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, ' ')); } });