-
JavaScript教程之jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
祖先是父、祖父或曾祖父等等。
通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素:
实例
$(document).ready(function(){ $("span").parent(); });
尝试一下 »
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先:
实例
$(document).ready(function(){ $("span").parents(); });
尝试一下 »
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素:
实例
$(document).ready(function(){ $("span").parents("ul"); });
尝试一下 »
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
实例
$(document).ready(function(){ $("span").parentsUntil("div"); });
如
<!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").parentsUntil("div").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>
栏目列表
最新更新
C#实现的对文件的重命名
C#设计模式学习笔记:(1)单例模式
C#实现DataTable转为Excel文件
C#设计模式学习笔记:简单工厂模式(工厂
Reflection(反射)
建造者模式(Builder)——从组装电脑开始
C# 调用APlayer教程
Dynamics CRM 365中结合注释和WebApi实现图片上
C# 添加文本、图片到PDF文档(基于Spire.
C#中System.ServiceProgress报错
基于UDP的服务器端和客户端
再谈UDP和TCP
在socket编程中使用域名
网络数据传输时的大小端问题
socket编程实现文件传输功能
如何优雅地断开TCP连接?
图解TCP四次握手断开连接
详细分析TCP数据的传输过程
图解TCP数据报结构以及三次握手(非常详
TCP协议的粘包问题(数据的无边界性)
一张图看懂 SQL 的各种 join 用法
执行count(1)、count(*) 与 count(列名) 到底有
如何去写一手好SQL ?
续 | 一套简单实用的SQL脚本,总有你需要
几道常见的SQL面试题,看你能答对几道?
你有一份经典SQL语句大全,请注意查收!
如何更优雅的写出你的SQL语句
当你执行JOIN ON时,数据库里发生了什么?
SQL 语句中 WHERE 条件后 写上1=1 是什么意思
常用SQL函数太简单?那是你没用过这些高