Wie Verschiebe ich die Liste posten?

Ich habe eine normale ungeordnete Liste

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

Wenn ich auf einen beliebigen Listeneintrag, es erscheinen soll 2. in der Liste, wenn möglich animieren, auf den zweiten Platz.

Ich weiß eine einfache Lösung HIERFÜR wäre der relativ-position der UL-und absolut-position der LIs und legen Sie die top-position, aber dies ist nicht möglich, da der Weg das markup geschrieben wird.

InformationsquelleAutor Lee Price | 2012-01-03

  1. 19

    Dieser tut alles, aber die animation:

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

    Wenn Sie auf ein Listenelement, wird es fügen Sie es, nachdem das erste Element in der <ul>, d.h. die zweite position in der Liste.

    Darüber hinaus können Sie animieren Sie diese auf verschiedene Weise. Hier ist einer:

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

    Hier ein arbeiten demo.

    Arbeitet ein Genuss! Weißt du, ob es überhaupt möglich animiert diese oder dieses etwas, das ich gehen soll?
    Es hängt davon ab, wie Sie animieren möchten. Ich aktualisiert meine Antwort mit einem basic-animation-Beispiel.

    InformationsquelleAutor FishBasketGordo

  2. 1

    Nehmen Sie einen Blick an der N-TEN Selektor hier http://api.jquery.com/nth-child-selector/ es könnte Ihnen helfen.

    InformationsquelleAutor Pirozek

  3. 1

    Hinzufügen eines id an die ungeordnete Liste (<ul id="list">), und fügen Sie es nach dem zweiten Kind.

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

    Dies funktioniert nur für Elemente nach dem ersten, aber ein Beispiel ist auf jsFiddle.

    InformationsquelleAutor Ryan Leonard

Schreibe einen Kommentar