jQuery 遍历 - 后代
使用jQuery,我们可以轻松地遍历DOM树以查找元素的后代。
后代是孩子,孙子,曾孙等。
在本章中,我们将解释如何遍历DOM树。
遍历DOM树
我们有以下jQuery方法,用于遍历DOM树:
下面将向您展示如何使用每种方法。
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遍历参考。