jQuery 遍历|祖先

简介: 祖先是父、祖父或曾祖父等等。通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。向上遍历 DOM 树这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:parent()parents()parentsUntil()parent() 方法parent() 方法返回被选元素的直接父元素。

祖先是父、祖父或曾祖父等等。
通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。

向上遍历 DOM 树

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

parent()
parents()
parentsUntil()

parent() 方法

parent() 方法返回被选元素的直接父元素。

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

下面的例子返回每个 <span> 元素的的直接父元素:

$(document).ready(function(){
$("span").parent();
});

parents() 方法

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先:

$(document).ready(function(){
$("span").parents();
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    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(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>
image.png

parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:

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

image.png
目录
相关文章
|
4月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
11月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
13天前
|
JavaScript
jQuery 遍历
jQuery 遍历
23 2
jQuery 遍历
|
8天前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
19 3
|
12天前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
12 4
|
12天前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
13 2
|
12天前
|
JavaScript
jQuery 遍历 - 后代
jQuery 遍历 - 后代
12 2
|
11天前
|
JavaScript
jQuery 遍历- 过滤
jQuery 遍历- 过滤
17 0
|
4月前
|
JavaScript
jQuery遍历节点的方法
jQuery遍历节点的方法
28 0
|
4月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
61 0