Mit jQuery können Sie HTML- Elemente einfach auswählen . Aber manchmal, wenn die HTML- Struktur komplexer ist, ist die Verfeinerung der von uns ausgewählten Elemente eine mühsame Sache. In diesem Tutorial erkunden wir zehn Möglichkeiten, die Sammlungen, mit denen wir arbeiten, zu verfeinern und zu erweitern.
HTML
Schauen wir uns zunächst die unten gezeigte einfache Seite an und wählen in diesem Tutorial die Elemente aus.
.gif)
„ Warum müssen wir eine Reihe von Elementen weiter verfeinern? Liegt es daran, dass die jQuery- Auswahlsyntax nicht leistungsfähig genug ist? “
Okay, beginnen wir mit einem Beispiel. Wenn auf der oben genannten Webseite auf einen Stern geklickt wird, müssen wir ihm und jedem Stern auf der linken Seite die Klasse „on“ hinzufügen . Gleichzeitig möchten wir die Hintergrundfarbe aller übergeordneten Sternelemente ändern , daher lautet unser Code wie folgt:
In der zweiten Zeile erhalten wir das aktuelle Objekt, auf das wir geklickt haben. Aber wie bekommt man die Eltern von Sternen ? Das ist div.rating . Allerdings gibt es auf einer Seite viele div.rating . Welches wollen wir? Wie bekomme ich alle Sterne links von „diesem“ ?
Die gute Nachricht ist, dass wir mit jQuery neue Sammlungen von Elementen erhalten können, die auf vorhandenen Sammlungen basierend auf diesen grundlegenden Beziehungen basieren. Und hier kommen Traversalfunktionen ins Spiel.
1. Kinder
Diese Funktion ruft die direkten untergeordneten Elemente einer Menge von Elementen ab.
Dies kann in vielen Situationen sehr praktisch sein, sehen Sie sich das Bild unten an:
.gif)
$('.star').click(function(){
$(this).addClass('on');
// Wie wähle ich das übergeordnete Element des aktuellen Objekts aus ?
// Wie bekomme ich alle Sterne links vom aktuellen Stern ?
});