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

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

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Когда я нажимаю на какой-либо элемент списка, он должен появиться 2-м в списке, если возможно, анимировать вторую позицию.

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

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

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

Когда вы нажимаете на элемент списка, он вставляет его после первого элемента в

    , то есть вторую позицию в списке.

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

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

    Вот рабочая демонстрация .

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

    Добавьте id в неупорядоченный список (

      ) и добавьте его после второго ребенка.

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

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