通过 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. JvmOverloads kotlin(14)（转）

    在Kotlin中@JvmOverloads注解的作用就是:在有默认参数值的方法中使用@JvmOverloads注解,则Kotlin就会暴露多个重载方法.可能还是云里雾里,直接上代码,代码解释一切:如果 ...

  2. pytorch的matmul怎么广播

    1)如果是两个1维的,就向量内积:2)如果两个都是2维的,就矩阵相乘3)如果第一个是1维,第二个是2维:填充第一个使得能够和第二个参数相乘:如果第一个是2维,第二个是1维,就是矩阵和向量相乘:例: a ...

  3. 剑指XX游戏(六) - 轻松搞定面试中的红黑树问题

    原文地址 http://blog.csdn.net/silangquan/article/details/18655795?utm_source=tuicool&utm_medium=refe ...

  4. 软件-效率：Microsoft To Do

    ylbtech-软件-效率:Microsoft To Do Microsoft To Do To Do 让你从工作到娱乐都保持专注. 1.返回顶部 1. 智能每日计划 使用“我的一天”,用智能个性化建 ...

  5. ORA-00904: "B"."METHOD": 标识符无效，00904. 00000 - "%s: invalid identifier"

    1 SELECT COUNT(1) FROM (SELECT a.id AS "id", a.district AS "district", a.company ...

  6. Mysql强制修改密码

    windows: 1,停止MYSQL服务,CMD打开DOS窗口,输入 net stop mysql 2,在CMD命令行窗口,进入MYSQL安装目录 比如E:\Program Files\MySQL\M ...

  7. 进程分配内存的两种方式--brk() 和mmap()（不设计共享内存）(转)

    如何查看进程发生缺页中断的次数? 用ps -o majflt,minflt -C program命令查看. majflt代表major fault,中文名叫大错误,minflt代表minor faul ...

  8. 3、kubeadm初始化Kubernetes集群

    同步时间 # ntpdate time.nist.gov k8s集群组成 k8s部署环境  https://kubernetes.io/docs/setup/independent/create-cl ...

  9. Linux增加虚拟内存方法

    例如增加2G虚拟内存,操作如下: [root@gamedb ~]# free -m[root@gamedb tmp]# dd if=/dev/zero of=/tmp/big_swap bs=1024 ...

  10. fio 硬盘测试工具

    一.windows环境 1. 安装fio:http://www.bluestop.org/fio/ 可以选择不同版本的安装,安装后在C:\Program Files\fio目录中可以找到fio的执行程 ...