Verwendung von jQuery Traversal Funktionen für komplexe HTML auswählen

10 sehr nützlich Traversal-Funktionen in jQuery

Mit jQuery wählst du einfach HTML-Elemente. Aber manchmal, wenn die HTML-Struktur komplexer ist, verfeinern das Element unserer Wahl ist eine lästige Sache. In diesem Tutorial werden wir untersuchen, 10 Wege zu verfeinern und erweitern die Sammlung werden wir manipulieren.

HTML

Zunächst werfen wir einen Blick auf die einfachen Seiten wie in der Abbildung unten, wodurch wir diese Elemente wählen.

Div.Container ist das Paketelement;

Div.Photo, Div.title und div.rating sind die direkten Unterebenen der div.container;

Jede div.star ist ein Kind der div.rating;

Div.satr der Klasse "on" ist, wird es einen kompletten Stern.

Warum möchten Sie durchqueren?

"Warum haben wir eine Reihe von Elementen verfeinern weiter, ist jQuery Syntax nicht stark genug zu wählen?"

Okay, fangen wir mit dem Beispiel. Auf der Webseite erwähnt vor, wenn ein Stern geklickt wird, müssen wir Klasse "auf" hinzufügen, um es und jeder Stern auf der linken Seite. Zur gleichen Zeit wollen wir die Hintergrundfarbe aller Sterne übergeordnete Elemente ändern, so ist unser Code wie folgt:

$ (". Star"). Klick (Funktion () {}

$ (This). Ausschneiden ("on");

Wie wähle ich das übergeordnete Element des aktuellen Objekts?

Wie bekomme ich den Stern auf der linken Seite des aktuellen Sterns?

});

In der zweiten Zeile haben wir das aktuelle Objekt, das, dem wir durch anklicken. Aber wie bekommt man das übergeordnete Element der Sterne?, div.rating. Allerdings auf einer Seite gibt es viele div.rating. Welches ist was wir wollen? wie bekomme ich den Stern auf der linken Seite von "this"?

Gott sei Dank, jQuery ermöglicht es uns, einen neuen Satz von Elementen basierend auf vorhandenen Sammlungen auf der Grundlage dieser Basis Beziehungen zu erhalten. Und diese sind genau das, wo die Traversierung funktioniert.

1, Kinder

Diese Funktion ruft direktes untergeordnetes Element eines Satzes von Elementen.

In vielen Fällen wird es bequem, einen Blick auf das folgende Bild:

Am Anfang ist die Star im Container ausgewählt;

Übergeben Sie einen Auswahlausdruck, (Kinder), das Selektionsergebnis zum ausgewählten Stern zu verengen;

Wenn Chilidren () jeder Parameter akzeptiert, alle direkten ist werden Kinder zurückgegeben.

Sonne-Level Elemente nicht zurück.