1. <!--
  2. parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
  3. parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
  4. parent取得很明确就是当前元素的父元素
  5. parents则是当前元素的祖先元素
  6. -->
  7. <html>
  8. <head></head>
  9. <body>
  10. <div id="div1">
  11. <div id="div2"><p></p></div>
  12. <div id="div3" class="a"><p></p></div>
  13. <div id="div4"><p></p></div>
  14. </div>
  15. </body>
  16. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  17. <script type="text/javascript">
  18. $("p").parent();            //取得的是div2、div3、div4
  19. $('p').parent('.a');        //取得是div3
  20. $('p').parent().parent();   //取得是div1（这点比较奇特，不过Jquery对象本身的特点决定了这是可行的）
  21. $('p').parents();           //取得的是div1、div2、div3、div4
  22. $('p').parents('.a');       //取得的是div3
  23. </script>
  24. </html>
  1. <body>
  2. <table>
  3. <tr>
  4. <td><input id="btn1" class="btn" type="button" value="test"/></td>
  5. <td>some text</td>
  6. </tr>
  7. </table>
  8. </body>
  9. <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  10. <script type="text/javascript">
  11. $(function(){
  12. $("#btn1").click(function(){
  13. alert($(this).parent().next().html());
  14. });
  15. });

打印结果：some text

其中：

1、this.parent() 获取的是input前面的td；

2、this.parent().parent() 获取的是tr；

3、this.parent().parent().parent() 获取的是table；

4、this.parent().next() 获取的是input前面的td相邻的另一个td。

另一个例子中：

  1. <div>
  2. <p>Hello</p>
  3. <p>Hello</p>
  4. </div>

$('p').parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div

有关parents

  1. <div id="one">
  2. <div id="Two">hello</div>
  3. <div id="Three">
  4. <p><a href="#">tonsh</a></p>
  5. </div>
  6. </div>

$("a").parent() 将会得到父对象<p>

$("a").parents()  得到父对象<p><div.3><div.1>

$("a").parents().filter("div") 将得到<div.3><div.1> 还可以写成$("a").parents("div")。

如果想得到<div.2>对象可以写成这样：$("a").parents("div:eq(0)")。

如果点击<a>链接时弹出<div.2>中的内容该怎么办？

var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();

alert(id);

Jquery的parent和parents(找到某一特定的祖先元素)用法的更多相关文章

  1. Jquery的parent和parents(找到某一特定的祖先元素)用法（转发：https://blog.csdn.net/cui_angel/article/details/7903704）

    <!-- parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合. parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选. ...

  2. 转：Jquery的parent和parents(找到某一特定的祖先元素)

    Jquery的parent和parents(找到某一特定的祖先元素) 关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则 ...

  3. Jquery的parent和parents(找到某一特定的祖先元素)

    关于Jquery的parent和parents parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以 ...

  4. Jquery中parent()和parents()

    一.parent()方法 此方法取得匹配元素集合中每个元素的紧邻父元素,也就是第一级父元素,而不是所有的祖先元素.所取得的父元素集合也可以使用表达式进行筛选. 二.parents()方法 此方法取得一 ...

  5. 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】

    JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...

  6. jQuery中.parent和.parents的区别

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选) ...

  7. jQuery的parent和parents和closest区别

    1.parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合.2.parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素).可以通过一个可选的表达式进行筛选.3.clo ...

  8. jQuery通过parent()和parents()方法访问父级元素

    <div class="inputGroup"> <p>2.您的最高学历是?</p> <label><input type=& ...

  9. JS和jQuery获取节点的兄弟，父级，子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

随机推荐

  1. 模拟Windows任务管理器CPU使用率的动态折线图-农夫山泉

    Delphi的TCanvas类可以实现各种复杂的图形输出功能,基于近期项目的需求,利用它实现了一个很炫的动态折线图(模拟了资源管理器中CPU使用率的折线图),可以直观地展现出数值的实时变化情况. 这段 ...

  2. TinkPHP 简单知识摘要

    1.Session处理 赋值:session('name','value'); //设置session 与 $_SESSION['think']['name'] = 'value';相等 取值:$va ...

  3. 再次理解WCF以及其通信（附加一個編程小經驗）

    一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...

  4. java事务（一）——事务特性

    事务 什么是事务?事务通俗的讲就是要做的事,在计算机术语中一般指访问或更新数据库中数据的一个工作单元.说起事务,那么就要提到事务的ACID特性,即原子性(atomicity).一致性(consiste ...

  5. leetcode 6 ZigZag Conversion(水题)

    就是简单的模拟一下就可以了.但是我一开始是用一个二维char数组来存的,这样在最终扫全体时会扫很多空的位置,浪费了很多时间,所以就time limit error了. 所以改进一下就用string数组 ...

  6. Agc017_D Game on Tree

    传送门 题目大意 给定一棵树,$1$号节点为根,两个人轮流操作,每次选择一个根节点外的点,删掉它以及它的子树,不能操作者输,求两人均采用最优策略下先手胜利还是后手胜利. 题解 经典问题树上删边游戏,根 ...

  7. CH5103 [NOIP2008]传纸条[线性DP]

    给定一个 N*M 的矩阵A,每个格子中有一个整数.现在需要找到两条从左上角 (1,1) 到右下角 (N,M) 的路径,路径上的每一步只能向右或向下走.路径经过的格子中的数会被取走.两条路径不能经过同一 ...

  8. uoj problem 10

    uoj problem 10 题目大意: 给定任务若干,每个任务在\(t_i\)收到,需要\(s_i\)秒去完成,优先级为\(p_i\) 你采用如下策略: 每一秒开始时,先收到所有在该秒出现的任务,然 ...

  9. Apache+OpenSSL实现证书服务器提供HTTPS

    通过 Linux+Apache+OpenSSL 实现 SSL ( Secure Socket Layer )证书服务器,提供安全的 HTTPS ( Hypertext Transfer Protoco ...

  10. Git 系列之tag的用法---为你的代码标记版本号

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 本地仓库操作 远程仓库操作 其他 tag 操作   在做app开发的时候经常有版本的概念,比如v1.0.v1.1之类的,不同 ...