English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQuery 遍历 - 后代

使用jQuery,我们可以轻松地遍历DOM树以查找元素的后代。

后代是孩子,孙子,曾孙等。

在本章中,我们将解释如何遍历DOM树。

遍历DOM树

我们有以下jQuery方法,用于遍历DOM树:

下面将向您展示如何使用每种方法。

jQuery children()方法

jQuery children()方法返回所选元素的所有直接子级。

此方法仅在DOM树下遍历单个级别。

下面的示例返回DIV的直接子元素:

$("document").ready(function(){
  $("div").children().css("background-color", "coral");
});
Testen Sie heraus‹/›

您还可以使用可选参数来过滤搜索子项。

以下示例返回DIV的直接子代的所有<p>元素:

$("document").ready(function(){
  $("div").children("p").css("background-color", "coral");
});
Testen Sie heraus‹/›

jQuery find() Methode

jQuery find()Die Methode gibt alle Nachkommen zurück, die mit den angegebenen Parametern übereinstimmen.

Diese Methode durchsucht die Nachkommen der DOM-Elemente entlang des Pfades, bis zum letzten Nachkommen.

Beginnen Sie von allen Absätzen und suchen Sie nach Nachkommen span-Elementen, im Vergleich zu $("p span"):

$("document").ready(function(){
  $("p").find("span").css("background", "mediumpurple");
});
Testen Sie heraus‹/›

Um mehrere Nachkommen zurückzugeben, trennen Sie die Selector-Namen mit Komma.

Nachfolgendes Beispiel gibt alle als Nachkommen des <p>-Elements befindlichen <span>- und <i>-Elemente zurück:

$("document").ready(function(){
  $("p").find("span, i").css("background", "mediumpurple");
});
Testen Sie heraus‹/›

jQuery Durchsuchen Referenz

Für eine vollständige Durchsuchungsmethode besuchen Sie bitte unserejQuery Durchsuchen Referenz.