通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

向上遍历 DOM 树

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

  • parent()
  • parents()
  • parentsUntil()

jQuery parent() 方法

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

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

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

code：

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

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

<div style="width:500px;">div (祖父)
<p>p (直接父)
<span>span</span>
</p>
</div>
</div>

</body>
</html>

jQuery parents() 方法

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

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

code：

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.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>

<!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 -->
</html>

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

code：

<script>
$(document).ready(function(){
$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>

jQuery parentsUntil() 方法

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

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

code：

<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>

jQuery 遍历 - 祖先的更多相关文章

  1. jQuery 遍历祖先

    祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...

  2. jQuery遍历-祖先

    祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...

  3. jQuery 遍历 – 祖先

    祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...

  4. jQuery遍历祖先元素：parentsUntil

    Description: Get the ancestors of each element in the current set of matched elements, up to but not ...

  5. JQuery：JQuery遍历详解

    JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...

  6. 常用的jquery遍历函数

    1.Jquery遍历祖先 1).parent()  方法返回被选元素的直接父元素. 2).parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...

  7. jquery遍历DOM方法总结

    1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...

  8. jQuery遍历文档(重要)

    什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您 ...

  9. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...

随机推荐

  1. mongodb 操作笔记

    切换库:use 库名 显示所有的数据库:show dbs 创建集合:db.createCollection("collection_name",{capped:true,size: ...

  2. SQL Server 数据库设计、命名、编码规范

    https://blog.csdn.net/songguozhi/article/details/5858159 SQL Server 数据库设计.命名.编码规范

  3. electron关于无边框窗口无法拖拽移动以及点击事件失效的问题

    为了使窗口无边框,使得在某些时候让项目看起来更美观,所以在创建窗口的时候通过设置 frame 属性的值为 false 来创建无边框窗口.但是无边框窗口会产生无法移动的问题,对于这个问题我们可以在渲染进 ...

  4. Oracle 12C 物理Standby 主备切换switchover

    Oracle 12C 物理Standby 主备切换switchover Oracle 12C 物理Standby 主备切换switchover Table of Contents 1. 简述 2. 切 ...

  5. ControlTemplate in WPF —— Calendar

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  6. linux性能监控 + Sendmail 发邮件

    sendmail安装 #!/bin/bash#控制发邮件的阈值是在rate,rate1和FF值(三个同样的用途,仅仅是名字不同)##注:该博文中的变量不规范,我是随意定义的,请注意##定义时间倒计时函 ...

  7. Redis客户端基本操作以及查看慢查询

    1.连接 redis-cli.exe -h 127.0.0.1 -p 6379 2.验证密码 λ redis-cli.exe -h 127.0.0.1 -p 6379127.0.0.1:6379> ...

  8. 微信小程序动画：高度渐变，left渐变

    今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...

  9. C++ 11的移动语义

    目录 可拷贝和可移动的概念 移动构造函数和移动赋值函数 小结移动构造和移动赋值 std::move() 使用 std::move 实现一个高效的 swap 函数 Move and swap 技巧 参考 ...

  10. [Python3] 040 文件 一般使用

    目录 文件 1. open 函数 2. with 语句 3. 先写再读 3.1 写 3.2 读 4. "位置"的查询与移动 4.1 tell() 4.2 seek(cookie, ...