开发者社区> 突突修> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery 遍历_过滤2|学习笔记
快速学习 jQuery 遍历_过滤2
111 0
jQuery 遍历_过滤3|学习笔记
快速学习 jQuery 遍历_过滤3
103 0
jQuery遍历_过滤1|学习笔记
快速学习 jQuery 遍历_过滤1
126 0
《jQuery LigerUI 插件介绍及使用》之ligerGrid
引用:http://ajava.org/article-1197-1.html 摘要: 一,简介ligerGrid的功能列表:1,支持本地数据和服务器数据(配置data或者url)2,支持排序和分页(包括Javascript排序和分页)3,支持列的“显示/隐藏”4,支持明细行(表格内嵌)5,支持汇总行6,支持单元格模板7,支持编辑表 .
1238 0
jquery插件printArea打印、corner圆角使用
corner ajdhsfa sfg safhjjkjksjk 123132131afasfasfsdafsaadsfasfsafsfs9999         div.
1031 0
帮助你构建自适应布局的30款优秀 jQuery 插件(下篇)
  自适应设计(Responsive Layouts)是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。下面是收集的15款优秀的自适应 jQuery 插件,希望这些插件能够帮助到您。
919 0
帮助你构建自适应布局的30款优秀 jQuery 插件(上篇)
  自适应设计(Responsive Layouts)是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。下面是收集的15款优秀的自适应 jQuery 插件,希望这些插件能够帮助到您。
924 0
JQuery获得url参数插件
直接上代码。自己下载吧。 代码下载
573 0
推荐12款非常有用的流行 jQuery 插件
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
890 0
+关注
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载