jQuery: spostare una voce di lista cliccata in cima alla lista

Possiamo trasformare dinamicamente una lista HTML spostando la voce cliccata in cima alla lista utilizzando una semplice tecnica jQuery. Vediamone insieme i dettagli.

Data la seguente lista HTML:

<ul>
  <li>Uno</li>
  <li>Due</li>
  <li>Tre</li>
  <li>Quattro</li>
  <li>Cinque</li>
  <li>Sei</li>
</ul>​

Possiamo utilizzare il seguente codice jQuery:

$(function() {
    
    $('li').click(function() {

        $(this).parent().prepend($(this));

    });
    
});​

Il metodo prepend() sposta l'elemento cliccato in cima alla lista. Potete visionare l'esempio finale in questa pagina.