jQuery get parent sibling für dieses element ist nur

Ich kann nicht herausfinden, wie diese zu schreiben.

Siehe meine mark-up-Struktur, die wiederholt mehrere Male auf einer Seite.

<div class="module">    
    <div class="archive-info">
        <span class="archive-meta">
            open
        </span>                         
    </div>
    <div class="archive-meta-slide">
    </div>                              
</div>

Wie Sie sehen können, in meiner mark-up, ich habe eine <span> das ist mein $metaButton - wenn dieser geklickt wird, läuft die animation auf der div.archive-meta-slide - dies ist einfach genug, aber ich versuche, um die animation zu starten nur auf die aktuelle div.module animiert alle divs mit der Klasse "archive-meta-slide", und ich bin wirklich kämpfen, um Sie zu animieren, nur die aktuelle div.archive-meta-slide mit this

Wäre es einfach, wenn die div.archive-meta-slide wurde innerhalb des übergeordneten div-der $metaButton, sondern weil es außerhalb dieser übergeordneten div, die ich nicht bekommen kann die Traversierung direkt.

Siehe mein Skript

var $metaButton = $("span.archive-meta"),
    $metaSlide = $(".archive-meta-slide");

$metaButton.toggle(
function() {
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300);
    $(this).parent().siblings().find(".archive-meta-slide").html("close");
},
function() {
    $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300);
    $(this).parent().siblings().find(".archive-meta-slide").html("open");
});

Kann jemand helfen?

Dank
Josh

InformationsquelleAutor Joshc | 2011-12-21

33
```
$(this).parent().siblings().find(".archive-meta-slide")  
```
Dies ist wirklich schließen. Dies sagt eigentlich "finde Elemente mit der Klasse archive-meta-slide sind Nachkommen der Geschwister von diesem element parent". Sie möchten sagen "finde Elemente mit der Klasse archive-meta-slide dass sind Geschwister dieses element parent". Für, dass, mit einem Wahlschalter auf der siblings nennen:
```
$(this).parent().siblings(".archive-meta-slide")  
```
Beachten Sie, dass, wenn das markup ist immer diese Struktur, Sie können sogar $(this).parent().next().

Finden Sie in der jQuery API:
InformationsquelleAutor lonesomeday

Verwenden $(this).closest(".module") zu finden, die übergeordneten Modul aus, wo der Klick passiert.

Du wahrscheinlich auch wollen, zu einem Abschluss-Funktion, um den text zu ändern, nachdem Sie die animation.

Die nette Sache über .closest() ist, sieht es einfach die "parent" - Kette so weit wie nötig, bis Sie Sie findet ein Objekt mit der richtigen Klasse. Dies ist viel weniger zerbrechlich als die Verwendung einer bestimmten Anzahl von .parent() Referenzen, wenn ein anderer Benutzer änderungen an Ihrem HTML-design ein wenig (fügt ein weiteres div oder span oder sowas in der übergeordneten Kette).

var $metaButton = $("span.archive-meta");

$metaButton.toggle(
    function() {
        var $slide = $(this).closest(".module").find(".archive-meta-slide");
        $slide.animate({ height: "0" }, 300, function() {
            $slide.html("close");
        });
    },
    function() {
        var $slide = $(this).closest(".module").find(".archive-meta-slide");
        $slide.animate({ height: "43px" }, 300, function() {
            $slide.html("open");
        });
    },
});

Könnte man auch TROCKNEN Sie es ein bisschen und machen eine gemeinsame Funktion:

function metaToggleCommon(obj, height, text) {
    var $slide = $(obj).closest(".module").find(".archive-meta-slide");
    $slide.animate({ height: height}, 300, function() {
        $slide.html(text);
    });
}

var $metaButton = $("span.archive-meta");
$metaButton.toggle(
    function() {metaToggleCommon(this, "0", "close")}, 
    function() {metaToggleCommon(this, "43px", "open")}
);

schön, sehr clever. Das ist gut so. Dank
sehr hilfreich für mich, thx!!!
die Verwendung von closest() ist robuster, als jfriend00 erklärt hat.

InformationsquelleAutor jfriend00

3

Du suchst...
```
$(this).parent().next('.archive-meta-slide')
```
Wenn die Struktur von #Modul verpasst, das könnte eher robust:
```
$(this).closest('#module').children('.archive-meta-slide')
```
Das klappte auch. Dank

InformationsquelleAutor s4y

Verwenden

jQuery(this).closest('.prev-class-name').find('.classname').first()

InformationsquelleAutor rakesh

1

Verwenden
```
$(this).parent().parent().children('.archive-meta-slide')
```
Dies ist so gut wie das suchen und Kinder von top-Modul div

$(this).parent().parent()

Ihre erste
```
<div class="module">
```
auch geklappt, danke!

InformationsquelleAutor Markandey Singh
0

Ausprobieren am nächsten die lassen Sie zurück, bis Sie bei dem Elternteil mit dem angegebenen Selektor.
```
$(this).closest(".module")
```
Wird auch versuchen, diese Dank

InformationsquelleAutor lxalln

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.