Come si spostano le voci dell'elenco?

Question

Ho una normale lista non ordinata

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Quando clicco su uno qualsiasi degli elementi della lista dovrebbe apparire secondo nella lista, se possibile animare a seconda posizione.

Conosco una soluzione semplice per posizionare l'UL in modo adeguato e posizionare i LI in modo assoluto e impostare la posizione in alto, ma ciò non è possibile a causa del modo in cui il markup è scritto.

Answer 1

Questo fa tutto, ma l'animazione:

$('li').click(function() { 
    var $this = $(this); 
    $this.insertAfter($this.siblings(':eq(0)')); 
}); 

Quando si fa clic su un elemento della lista, che verrà inserirla dopo la prima voce del <ul>, vale a dire la seconda posizione nella lista.

Inoltre, è possibile animare questo in vari modi. Eccone uno:

$('li').click(function() { 
    var $this = $(this), 
     callback = function() { 
      $this.insertAfter($this.siblings(':eq(0)')); 
     }; 
    $this.slideUp(500, callback).slideDown(500); 
}); 

Ecco uno working demo.

Answer 2

Dai uno sguardo all'ennesimo selettore qui http://api.jquery.com/nth-child-selector/ potrebbe aiutarti.

Answer 3

Aggiungere un id all'elenco non ordinato (<ul id="list">) e aggiungerlo dopo il secondo figlio.

$('#list li').click(function() { 
    $(this).insertAfter("#list li:nth-child(1)"); 
}); 

Questo funziona solo per elementi dopo il primo, ma un esempio è il jsFiddle.