jQuery 遍历|后代

简介: 后代是子、孙、曾孙等等。通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。向下遍历 DOM 树下面是两个用于向下遍历 DOM 树的 jQuery 方法:children()find()children() 方法children() 方法返回被选元素的所有直接子元素。

后代是子、孙、曾孙等等。

通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

children()
find()

children() 方法

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

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素:

$(document).ready(function(){
$("div").children();
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>
image.png
返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:

$(document).ready(function(){
$("div").children("p.1");
});

image.png

find() 方法

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代

例子返回属于 <div> 后代的所有 <span> 元素:
$(document).ready(function(){
$("div").find("span");
});


image.png
目录
相关文章
|
1月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
9 0
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
3月前
|
JavaScript
jquery的遍历
jquery的遍历
|
4月前
|
JavaScript 前端开发
jQuery 第九章(jQuery遍历)
jQuery 第九章(jQuery遍历)
28 0
|
5月前
|
JavaScript
jQuery 遍历 - siblings() 方法应用
jQuery 遍历 - siblings() 方法应用
29 0
|
5月前
|
JSON JavaScript 前端开发
JQuery数组遍历 - $.each(),$().each()和forEach()
JQuery数组遍历 - $.each(),$().each()和forEach()
50 0
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之遍历
前端基础 -JQuery之遍历
21 0
|
JavaScript
jQuery- 遍历-祖先
jQuery- 遍历-祖先
47 0
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
128 0
jQuery遍历div,判断是否为空,为空时执行某个操作
|
JavaScript 数据安全/隐私保护
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
105 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法