通过 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. pandas之to_datetime时区转换

    from datetime import date, datetime, timedelta     import time     import pandas as pd     from pand ...

  2. 四、使用jsonpath-JSON Extractor提取复杂响应中的数组及其他字段

    一.jsonpath实时调试url http://jsonpath.com/ 二.对于复杂响应的提取字段 1.json字符串如下: { "code": 0, "data& ...

  3. LC 562. Longest Line of Consecutive One in Matrix

    Given a 01 matrix M, find the longest line of consecutive one in the matrix. The line could be horiz ...

  4. 通过TCODE查找SPRO路径

    1.SE11:CUS_ACTOBJ,根据OBJECTNAME(对象名称),即视图名称,获取Customizing activity(ACT_ID) 2.根据ACT_ID在表CUS_IMGACT获取说明 ...

  5. spring boot系列（五）spring boot 配置spring data jpa (查询方法)

    接着上面spring boot系列(四)spring boot 配置spring data jpa 保存修改方法继续做查询的测试: 1 创建UserInfo实体类,代码和https://www.cnb ...

  6. python安装二进制k8s 1.11.0 一个master、一个node 查看node节点是主机名---apiserver无法启动，后来改了脚本应该可以

    一.脚本说明: 本实验中master.node.etcd都是单体. 安装顺序为:先安装test1节点主要组件,然后开始安装test2节点,最后回头把test1节点加入集群中,这样做目的是理解以后扩容都 ...

  7. java：easyui（重点示例）

    1.accordion(可折叠的): <!doctype html> <html lang="zh"> <head> <title> ...

  8. 使用PhantomJS

    PhantomJS是一个基于WebKit的服务器端JavaScript API.它全面支持Web而无需浏览器支持,不仅运行快,原生支持各种web标准:DOM处理.CSS选择器.JSON.Canvas, ...

  9. XCTF (app2)

    打开app,有两个输入框和一个按钮.点击按钮会跳转到新的页面显示Waiting for you. 打开JEB反编译. 如果两个输入框的长度都不为0,那么获取这两个值到v0和v1中,Log记录日志. 创 ...

  10. 【FZU - 2150】Fire Game（bfs）

    --> Fire Game 直接写中文了 Descriptions: 两个熊孩子在n*m的平地上放火玩,#表示草,两个熊孩子分别选一个#格子点火,火可以向上向下向左向右在有草的格子蔓延,点火的地 ...