阅读 146

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遍历参考。


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐