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

通过 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");
});

尝试一下 »

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. Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错GConf error

    Linux 的 GConf error 解决办法 问题: Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错,导致重新进入Centos系统后出现: GConf error:Fail ...

  2. HTML5与CSS3权威指南.pdf4

    拖放API HTML5实现了直接拖放操作API,简化HTML4利用mousedown.mousemove等事件实现的操作 实现拖放的步骤 1要将被拖动元素的draggable属性设置为true,img ...

  3. Application使用示例

    MainActivity如下: package cn.testapplication; import android.os.Bundle; import android.view.View; impo ...

  4. 基于OpenCV的人脸识别[iOS开发笔记(2)]

    开始了OpenCV的试水工作了... 1.Get ready 在OpenCV中我们会使用函数cv::CascadeClassifier 来进行人脸检测.但是在使用本函数之前我们需要添加一个XML文件对 ...

  5. (转)Zend Studio 10.6.1破解注册图文详解

    原文来自:http://www.softown.cn/soft/zend-studio/windows/10.6.1#downloads 下面我们以Zend Studio 10.6.1正式版为例来介绍 ...

  6. Title Case

    地址:http://www.codewars.com/kata/5202ef17a402dd033c000009/train/python 题目: A string is considered to ...

  7. springMVC零配置吐槽

    此时此刻,哥哥我不得不大大的吐槽一下.从github上down下来一个spring-mvc的chat演示样例,牛逼作者用的是注解的方式,项目全然零配置.而我眼下用的springMVC框架,还是在xml ...

  8. [Javascript] delete keyword

    delete keyword doesn't actually delete the value but just the reference. var me = { name: { first: & ...

  9. Android SDK无法更新问题解决

    1.在SDK Manager下Tools->Options打开了SDK Manager的Settings,选中“Force https://… sources to be fetched usi ...

  10. Cocos2d-X中字符串的处理

    CCString 用惯了NSString,你会严重高估自己处理字符串的能力.使用Cocos2d-X后只能用char*或者string来代替.诸如字符串的拼接,替换,查找都比NSString麻烦不少. ...