Bei der Verwendung von jQuery für DOM-Operationen ist es häufig erforderlich, für den nächsten Schritt die untergeordneten Elemente eines Elements abzurufen. In diesem Artikel wird ausführlich erläutert, wie Sie mit jQuery untergeordnete Elemente abrufen.
1. jQuery-Selektor für untergeordnete Elemente
In jQuery können Sie den Selektor für untergeordnete Elemente verwenden, um untergeordnete Elemente abzurufen. Der untergeordnete Elementselektor verwendet das Symbol „>“, das die direkten untergeordneten Elemente eines Elements auswählt.
Zum Beispiel können Sie den folgenden Code verwenden, um alle direkten untergeordneten Elemente des Elements mit der ID des übergeordneten Elements abzurufen:
$("#parent > *")
wobei das Symbol „*“ alle Elemente darstellt.
Wenn Sie das Element mit der untergeordneten Klasse im direkten untergeordneten Element mit der ID des übergeordneten Elements abrufen möchten, können Sie den folgenden Code verwenden:
$("#parent > .child")
wobei „.“ den Klassenselektor darstellt.
2. jQuery-Methoden zum Durchlaufen von Unterelementen
jQuery bietet eine Reihe von Methoden zum Durchlaufen der Unterelemente eines Elements. Die Methode
children() gibt alle direkten Kinder des angegebenen Elements zurück. Es werden nicht alle untergeordneten Elemente zurückgegeben.
Zum Beispiel kann der folgende Code alle direkten untergeordneten Elemente aller Elemente mit der ID des übergeordneten Elements zurückgeben:
$("#parent").children()
Wenn Sie die Elemente mit der Klasse „child“ unter den direkten untergeordneten Elementen mit der ID des übergeordneten Elements erhalten möchten, müssen Sie kann den folgenden Code verwenden: Die Methode
$("#parent").children(".child")
find() gibt die Nachkommenelemente des angegebenen Elements zurück. Es gibt alle untergeordneten Elemente des angegebenen Elements zurück, nicht nur direkte untergeordnete Elemente.
Zum Beispiel kann der folgende Code alle untergeordneten Elemente mit der Klasse „Kind“ im Element mit der ID „Eltern“ zurückgeben:
$("#parent").find(".child")
next()-Methode gibt das nächste Geschwisterelement des angegebenen Elements zurück. Wenn kein nächstes Geschwisterelement vorhanden ist, wird ein leeres jQuery-Objekt zurückgegeben.
Zum Beispiel kann der folgende Code das nächste gleichgeordnete Element des Elements mit der ID des übergeordneten Elements zurückgeben:
$("#parent").next()
prev()-Methode gibt das vorherige gleichgeordnete Element des angegebenen Elements zurück. Wenn kein vorheriges Geschwisterelement vorhanden ist, wird ein leeres jQuery-Objekt zurückgegeben.
Zum Beispiel kann der folgende Code das vorherige Geschwisterelement des Elements zurückgeben, dessen ID übergeordnetes Element ist:
$("#parent").prev()
siblings()-Methode gibt alle Geschwisterelemente des angegebenen Elements zurück. Geschwisterelemente sind alle Elemente, die dasselbe übergeordnete Element wie das angegebene Element haben.
Zum Beispiel kann der folgende Code alle Geschwisterelemente des Elements mit der ID des übergeordneten Elements zurückgeben:
$("#parent").siblings()
first()-Methode gibt das erste untergeordnete Element des angegebenen Elements zurück.
Zum Beispiel kann der folgende Code das erste untergeordnete Element des Elements mit der ID des übergeordneten Elements zurückgeben:
$("#parent").children().first()
last()-Methode gibt das letzte untergeordnete Element des angegebenen Elements zurück.
Zum Beispiel kann der folgende Code das letzte untergeordnete Element des Elements mit der ID des übergeordneten Elements zurückgeben:
$("#parent").children().last()
3. Beispielcode
Das Folgende ist ein einfacher Beispielcode, um zu veranschaulichen, wie man jQuery verwendet, um untergeordnete Elemente abzurufen:
jQuery获取子级元素示例 子元素1子元素2子元素3
Das Obige ist die Methode und der Beispielcode für die Verwendung von jQuery zum Abrufen untergeordneter Elemente. Wenn Sie Unterelemente bearbeiten müssen, wählen Sie bitte die geeignete Methode entsprechend der tatsächlichen Situation aus.
Das obige ist der detaillierte Inhalt vonSo erhalten Sie untergeordnete Elemente in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!