jQuery 遍历 - 后代

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

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

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

遍历DOM树

我们有以下jQuery方法，用于遍历DOM树：

• children()

• find()

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

jQuery children()方法

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()方法

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");
});

jQuery遍历参考

有关完整的遍历方法参考，请访问我们的jQuery遍历参考。