Как перемещать элементы списка?

Question

У меня есть нормальный неупорядоченный список

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

При нажатии на любой из пунктов списка он должен появиться второй в списке, если возможно, одушевленных на вторую позицию.

Я знаю, что легкое решение для этого было бы относительно позиционировать UL и полностью позиционировать LI и установить верхнее положение, но это невозможно из-за способа написания разметки.

Answer 1

Это делает все, кроме анимации:

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

При нажатии на элементе списка, он будет вставить его после первого элемента в <ul>, то есть вторая позиция в списке.

Кроме того, вы можете анимировать это различными способами. Вот один из них:

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

Вот working demo.

Answer 2

Посмотрите на n-й селектор здесь http://api.jquery.com/nth-child-selector/ он может вам помочь.

Answer 3

Добавить id в неупорядоченный список (<ul id="list">) и добавить его после второго ребенка.

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

Это работает только для элементов после того, как первый, но пример на jsFiddle.