祖先是父、祖父或曾祖父等等。

通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。


向上遍历 DOM 树

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:


jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素:

实例

$(document).ready(function(){
  $("span").parent();
});

尝试一下 »

提示:在本站的jQuery编程实战中,你可以练习:jQuery使用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");
});

尝试一下 »

jQuery 遍历 – 祖先的更多相关文章

  1. jQuery 遍历祖先

    祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...

  2. jQuery遍历-祖先

    祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() ...

  3. jQuery遍历祖先元素:parentsUntil

    Description: Get the ancestors of each element in the current set of matched elements, up to but not ...

  4. jQuery 遍历 - 祖先

    通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() pare ...

  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. ubuntu安装IBM DB2 Express-C

    去 官网 下载DB2对应Linux下的安装包和语言包.

  2. eclipse下maven插件搭建springmvc之helloworld

    这几天学习了怎样使用maven,最终还是要回归web项目嘛,所以主要还是使用eclipse插件. 1 下载eclipse maven插件. 其实新版的eclipse已经集成了maven:lunar.m ...

  3. 初探Javascript之DOM

    DOM对象(文档对象模型) HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML).HTML DOM 定义了用于 HT ...

  4. [LeetCode] Find K Closest Elements 寻找K个最近元素

    Given a sorted array, two integers k and x, find the k closest elements to x in the array. The resul ...

  5. 用js来实现那些数据结构08(链表02-双向链表)

    其实无论在任何语言中,一种数据结构往往会有很多的延伸和变种以应对不同场景的需要.其实前面我们所学过的栈和队列也是可以用链表来实现的.有兴趣的小伙伴可以自己尝试着去实现以下. 有点跑题了...,我们还是 ...

  6. GCD(ZYYS)

    [问题描述]在山的那边.海的那边有 n 个小矮人,他们生存的意义就是要保护他们的精神领袖——GCD.有一天,他们收到了一封恐吓信,说要在一个遥远的地方用维纳斯之箭射击 GCD,让他变成一根面条,n 个 ...

  7. C++Primer学习——各种运算符

    前缀递增和后缀递增 class NewInt { public: NewInt():RootInt(0){}; NewInt(int IniInt):RootInt(IniInt){}; NewInt ...

  8. 【NOIP2016】愤怒的小鸟

    题目描述 Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的飞行轨迹均为形 ...

  9. hdu 2865 Polya计数+(矩阵 or 找规律 求C)

    Birthday Toy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  10. hdu 5437Alisha’s Party(优先队列)

    题意:邀请k个朋友,每个朋友带有礼物价值不一,m次开门,每次开门让一定人数p(如果门外人数少于p,全都进去)进来,当所有人到时会再开一次,每次都是礼物价值高的人先进. /*小伙伴最开始gg了,结果发现 ...