¿Cómo muevo los artículos de la lista?

Question

Tengo una lista desordenada normales

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

Cuando hago clic en cualquiera de los elementos de la lista debe aparecer segundo en la lista, si es posible animar a la segunda posición.

Sé que una solución fácil para esto sería posicionar relativamente la UL y posicionar absolutamente los LI y establecer la posición superior, pero esto no es posible debido a la forma en que se escribe la marca.

Answer 1

Esto hace de todo pero la animación:

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

Al hacer clic en un elemento de la lista, que se inserta tras el primer elemento de la <ul>, es decir, la segunda posición en la lista.

Además, puede animar esto de varias maneras. Aquí hay uno:

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

Aquí hay una working demo.

Answer 2

Eche un vistazo a nth selector aquí http://api.jquery.com/nth-child-selector/ que podría ayudarlo.

Answer 3

Agregue id a la lista desordenada (<ul id="list">) y añádala después del segundo hijo.

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

Esto sólo funciona para los elementos después de la primera, pero es un ejemplo de jsFiddle.