Comment déplacer des éléments de la liste?

J'ai un normal liste non ordonnée

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

Quand je clique sur un des éléments de la liste, il doit apparaître 2ème dans la liste, si possible, de les animer en deuxième position.

Je sais une solution simple pour cela serait relativement à la position de l'UL et absolument position de l'ol et de définir la position de tête, mais cela n'est pas possible en raison de la façon dont le balisage est écrit.

source d'informationauteur Lee Price

  1. 19

    Ce fait tout sauf de l'animation:

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

    Lorsque vous cliquez sur un élément de la liste, il va insérer après le premier élément de la <ul>c'est à dire la deuxième position dans la liste.

    En outre, vous pourriez animer ce de diverses manières. En voici un:

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

    Voici un travail de démonstration.

  2. 1

    Prendre un coup d'oeil à la nième sélecteur ici http://api.jquery.com/nth-child-selector/ il pourrait vous aider.

  3. 1

    Ajouter un id de la liste non ordonnée (<ul id="list">), et de l'ajouter après le deuxième enfant.

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

    Cela ne fonctionne que pour les éléments après la première, mais, par exemple, est sur jsFiddle.