Jak przenosić elementy listy?

Question

mam normalnego liście nieuporządkowanej

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

Po kliknięciu na którykolwiek z elementów listy powinien pojawić 2. miejsce na liście, jeśli to możliwe ożywionej na drugiej pozycji.

Wiem, że prostym rozwiązaniem byłoby względne ustawienie UL i absolutne położenie LI i ustawienie górnej pozycji, ale nie jest to możliwe ze względu na sposób pisania znaczników.

Answer 1

To nie wszystko ale animacja:

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

Po kliknięciu na elemencie listy, to włóż go po pierwszej pozycji w <ul>, czyli drugą pozycję na liście.

Co więcej, możesz animować to na różne sposoby. Oto jeden:

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

Oto working demo.

Answer 2

Spójrz na n-ty selektor tutaj http://api.jquery.com/nth-child-selector/ może ci pomóc.

Answer 3

Dodaj id do listy nieuporządkowanych (<ul id="list">) i dodaj ją po drugim potomku.

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

Zadziała tylko dla elementów po raz pierwszy, ale przykładem jest jsFiddle.