jQuery 遍历 - 祖先
通过 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 遍历 - 祖先的更多相关文章
- jQuery 遍历祖先
祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...
- jQuery遍历-祖先
祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...
- jQuery 遍历 – 祖先
祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...
- jQuery遍历祖先元素：parentsUntil
Description: Get the ancestors of each element in the current set of matched elements, up to but not ...
- JQuery：JQuery遍历详解
JQuery:遍历一.什么是遍历?jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- 常用的jquery遍历函数
1.Jquery遍历祖先 1).parent() 方法返回被选元素的直接父元素. 2).parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...
- jquery遍历DOM方法总结
1.jQuery 遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery ...
- jQuery遍历文档(重要)
什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您 ...
- jQuery 遍历函数
转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...
随机推荐
- DAY 5 & 6
DAY 5 之前整过一个DP 动态规划 DP 啥是DP? DP等价于DAG!!! (1)无后效性:DP的所有状态之间组成一个DAG (2)最优子结构 (3)阶段性 (4)转移方程:如何计算状态 一般 ...
- numpy之填充为nan的数据为该列平均值
# coding=utf-8 import numpy as np ''' 填充nan的数据,为该列的平均值 ''' def fill_ndarray(t1): for i in range(t1.s ...
- nodejs 中间件理解
中间件概念 在NodeJS中,中间件主要是指封装所有Http请求细节处理的方法.一次Http请求通常包含很多工作,如记录日志.ip过滤.查询字符串.请求体解析.Cookie处理.权限验证.参数验证.异 ...
- 惠州双月湾游记 & 攻略
惠州双月湾游记&攻略 2019 年的 11 月底和小朱.Josie 约了快乐周末去惠州双月湾玩! 我和时猪一起从武汉出发到广州,然后和他们俩一起从广州自驾去的惠州.大致行程如下: Day 1: ...
- iOS服务器数据请求"汉字编码"问题
下面记录一下数据请求问题: 1.不知道大家有木有遇到过,当数据请求的URL带有汉字的时候,请求数据肯定会报404错误,也就是参数或者是接口URL错误<虽然说404,500等错误一般都是服务器问题 ...
- UBT框架加解密工具项目 UBT.Framework.Encryption
DESEncrypt.cs //==================================================================================== ...
- c++ | size_t
1.size_t的定义 size_t是一种数据相关的无符号类型,它被设计得足够大以便能够内存中任意对象的大小. 在cstddef头文件中定义了size_t类型,这个文件是C标准库stddef.h头文件 ...
- Java内存模型（三）原子性、内存可见性、重排序、顺序一致性、volatile、锁、final
一.原子性 原子性操作指相应的操作是单一不可分割的操作.例如,对int变量count执行count++d操作就不是原子性操作.因为count++实际上可以分解为3个操作:(1)读取变量co ...
- 递归拷贝目录与删除目录 WindowsAPI C++
/*判断一个路径是否是已存在的目录*/ bool IsDirectory(const std::wstring& pstrPath) { DWORD dw = GetFileAttribute ...
- SpringBoot上传文件
1.pom文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...