jQuery-Objekten arbeiten, die in Variablen gespeichert sind. Zum Beispiel:
var anchors = jQuery('a');
// Alle direkten Kind-Elemente aller Anker-Elemente
// können auf drei verschiedenen Wegen selektiert werden:
// #1
anchors.children();
// #2
jQuery('> *', anchors);
// #3
anchors.find('> *');
Es gibt sogar noch mehr Wege, dieses Ziel zu erreichen! In dieser Situation ist die erste Methode die schnellste. Wie schon erwähnt können Sie einen Selektions-Ausdurck an
children()
übergeben, um die Ergebnisse zu filtern:
jQuery('#content').children('p');
Damit werden nur Absatz-Elemente, die direkte Kind-Elemente von
#content
sind, zurückgegeben.
Bestimmte Geschwister-Elemente selektieren
Problem
Sie wollen nur ein bestimmtes Set an Geschwister-Elementen für ein gegebenes Element selektieren.
Lösung
Wenn Sie die benachbarten Geschwister-Elemente eines bestimmten Elements selektieren möchten, können Sie den Kombinator für benachbarte Geschwister nutzen(
+
).Wie beim Kombinator für Kind-Elemente (
>
) erwartet der Geschwister-Kombinator einen Selektions-Ausdruck auf jeder Seite. Der Ausdruck auf der rechten Seite ist für den Selektor gedacht, während der Ausdruck auf der linken Seite das Geschwister-Element ist, das Sie finden wollen. Hier ein Beispiel für HTML-Code:
Haupttitel
Abschnittsüberschrift
Inhalte ...
Abschnittsüberschrift
Mehr Inhalte ...
Wollen Sie nur die
-Elemente selektieren, die direkt auf
-Elemente folgen, dann können Sie den folgenden Selektor nutzen:
jQuery('h1 + h2');
// Selektiert ALLE H2-Elemente, die direkt neben H1-Elementen liegen
In diesem Beispiel wird nur ein
-Element selektiert (das erste). Das zweite wird nicht mit aufgenommen, denn es ist zwar ein Geschwister-Element, aber bezogen auf das
-Element nicht benachbart .
Wenn Sie andererseits alle Geschwister-Elemente eines bestimmten Elements selektieren und filtern wollen – unabhängig von »Nachbarschaftsstatus« – können Sie die jQuery-Methode
siblings()
nutzen,um sie zu erreichen, und dabei einen optionalen Selektor-Ausdruck übergeben, um die Selektion zu filtern:
jQuery('h1').siblings('h2,h3,p');
// Selektiert alle H2-, H3- und P-Elemente, die Geschwister-Elemente von H1-Elementen
// sind
Manchmal wollen Sie Geschwister-Elemente abhängig von ihrer Position relativ zu anderen Elementen erreichen. Hier ein weiteres HTML-Beispiel:
- Erstes Element
- Zweites Element
- Drittes Element
- Viertes Element
- Fünftes Element
Um alle List-Einträge unterhalb des zweiten Elements zu erhalten (also nach
li.selected
), können Sie die folgende Methode nutzen:
jQuery('li.selected').nextAll('li');
Der Methode
nextAll()
kannwie
siblings()
ein Selektor-Ausdruck mitgegeben werden, um die Selektion zu filtern, bevor sie zurückgegeben wird. Übergeben Sie keinen Selektor, dann liefert
nextAll()
alle Geschwister-Elemente des Ziel-Elements, die danach aufgeführt sind.
Bei diesem Beispiel könnten Sie auch einen anderen CSS-Kombinator nutzen, um alle List-Elemente nach dem zweiten zu selektieren. Der Kombinator für allgemeine Geschwister (
~
)ist in CSS3 dazugekommen, daher haben Sie ihn vermutlich in Ihren Stylesheets noch nicht verwendet. Aber glücklicherweise können Sie ihn in jQuery nutzen, ohne sich um die Unterstützung durch den Browser Gedanken machen zu müssen. Er funktioniert wie der Kombinator für benachbarte Geschwister (+), nur dass er alle folgenden Geschwister-Elemente auswählt, nicht nur das benachbarte. Mit dem eben genutzten Markup können Sie alle Liste-Elemente nach
li.selected
mit folgendem Selektor auswählen:
jQuery('li.selected ~ li');
Diskussion
Der Kombinator für benachbarte Geschwister ist unter Umständen manchmal etwas schwierig einzusetzen, weil er nicht dem Top-Down-Ansatz der meisten anderen Selektions-Ausdrücke folgt. Aber es lohnt sich, ihn zu kennen, und oft lässt er sich nutzen, um mit minimalem Aufwand das Gewünschte zu erreichen.
Die gleiche Funktionalität ließe sich auch ohne einen Selektor erzielen:
jQuery('h1').next('h2');
Die Methode
next()
kanneine nette Alternative zur Selektions-Syntax darstellen, insbesondere in einem JavaScript-Umfeld, in dem Sie jQuery-Objekte in Variablen abgelegt haben:
var topHeaders = jQuery('h1');
topHeaders.next('h2').css('margin','0');
Elemente über die Index-Reihenfolge