Ordinare le liste con jQuery richiede un procedimento simile a quello usato per ordinare le tabelle. Entrambi infatti richiedono l'uso del metodo JavaScript sort(). Vediamo insieme i dettagli.
Abbiamo la seguente lista:
<ul id="sortable">
<li>jQuery</li>
<li>CSS</li>
<li>WordPress</li>
<li>PHP</li>
<li>HTML5</li>
<li>JavaScript</li>
</ul>
Definiamo il seguente oggetto Sortable avente un unico metodo:
var Sortable = {};
Sortable.sort = function(which, dir) {
Sortable.dir = (dir == 'desc') ? -1 : 1;
$(which).each(function() {
var sorted = $(this).find('> li').sort(function(a, b) {
return $(a).text().toLowerCase() > $(b).text().toLowerCase() ?
Sortable.dir : -Sortable.dir;
});
$(this).append(sorted);
});
};
Il metodo accetta come secondo parametro l'ordine di visualizzazione: -1 è discendente e 1 è ascendente. Questo parametro verrà usato con il metodo JavaScript sort(), che prenderà in esame la prima lettera di ciascuna parola. Esempio:
$(function() {
$('#asc').click(function() {
Sortable.sort('#sortable', 'asc');
return false;
});
$('#desc').click(function() {
Sortable.sort('#sortable', 'desc');
return false;
});
});
Potete visionare l'esempio finale in questa pagina.