English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
使用jQuery,我们可以轻松地遍历DOM树以查找元素的后代。
后代是孩子,孙子,曾孙等。
在本章中,我们将解释如何遍历DOM树。
我们有以下jQuery方法,用于遍历DOM树:
下面将向您展示如何使用每种方法。
jQuery children()方法返回所选元素的所有直接子级。
此方法仅在DOM树下遍历单个级别。
下面的示例返回DIV的直接子元素:
$("document").ready(function(){ $("div").children().css("background-color", "coral"); });テストをしてみる‹/›
您还可以使用可选参数来过滤搜索子项。
以下示例返回DIV的直接子代的所有<p>元素:
$("document").ready(function(){ $("div").children("p").css("background-color", "coral"); });テストをしてみる‹/›
jQuery find()このメソッドは指定されたパラメータに一致するすべての後代要素を返します。
このメソッドはDOM要素の後代を下から上に順に遍历し、最後の後代まで下りていきます。
すべての段落から始めて、後代span要素を検索します。以下の$("p span")と同じです:
$("document").ready(function(){ $("p").find("span").css("background", "mediumpurple"); });テストをしてみる‹/›
複数の後代を返す場合は、選択子名をカンマで区切ってください。
以下の例では、<p>要素の後代としてすべての<span>および<i>要素が返されます:
$("document").ready(function(){ $("p").find("span, i").css("background", "mediumpurple"); });テストをしてみる‹/›
完全な遍历メソッドのリファレンスについては、以下のURLを訪れてください。jQueryの遍历リファレンス。