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. 一张图理解is_nll isset empty

    isset 判断变量是否已存在,如果变量存在则返回 TRUE,否则返回 FALSE. empty 判断变量是否为空,如果变量是非空 或非零 的值,则 empty() 返回 FALSE.换句话说,&qu ...

  2. centos 静态拨号

    本人系统centos6.5:虚拟机太丑,固ssh. centos的与联网相关的配置文件在 $ /etc/sysconfig/network-scripts DHCP方式-联网 打开文件 $ vim / ...

  3. codeforces 628C C. Bear and String Distance

    C. Bear and String Distance time limit per test 1 second memory limit per test 256 megabytes input s ...

  4. leetcode 35 Search Insert Position(二分法)

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  5. Android之单元测试学习

    1.单元测试概念 单元测试(又称为模块测试),检验程序模块(软件设计的最小单位)正确性的测试工作,常常是程序员写的一段代码.对于面向对象编程,最小单元就是方法,包括基类(超类).抽象类.或者派生类(子 ...

  6. BZOJ5442: [Ceoi2018]Global warming

    BZOJ5442: [Ceoi2018]Global warming https://lydsy.com/JudgeOnline/problem.php?id=5442 分析: 等价于后缀加(前缀减也 ...

  7. bzoj 4773: 负环 floyd

    题目: 对于边带权的有向图,找出一个点数最小的环,使得环上的边权和为负. 2 <= n <= 300. 题解: 我们可以考虑从小到大枚举答案. 然后每次枚举更大的答案的时候就从当前的较小的 ...

  8. Oracle RAC TAF 无缝failover

    理论背景: TAF( Transparent Application Failover ) allows oracle clients to reconnect to a surviving inst ...

  9. poj 1517 u Calculate e(精度控制+水题)

    一.Description A simple mathematical formula for e is e=Σ0<=i<=n1/i! where n is allowed to go t ...

  10. File:isctype.c Line 68

    刚接触DSP,拿来别人的代码,编译时,发现如下错误: 百思不得琪姐,一番调查之后,发现自己的工程worksapce中有中文路径,怎一个fuck了得.