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

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

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

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

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

Ответ 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);
});

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

Ответ 2

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

Ответ 3

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

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

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