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. shell 中 exec 和 source 命令解析

    文章大部分来源于:http://www.cnblogs.com/zhaoyl/archive/2012/07/07/2580749.html 作为笔记留存博客备忘. exec和source都属于bas ...

  2. bzoj 2005: [Noi2010]能量采集 筛法||欧拉||莫比乌斯

    2005: [Noi2010]能量采集 Time Limit: 10 Sec  Memory Limit: 552 MB[Submit][Status][Discuss] Description 栋栋 ...

  3. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  4. ibatis的resultClass与resultMap 的区别

    ibatis的resultClass与resultMap还是有很大的区别.以下是我碰到的一个问题. 配置文件写法如下: 1 sqlMap2 typeAlias alias="notice&q ...

  5. apache 简单笔记

    1.端口监听 可以多个 Listen 80Listen 8080 2.多网站 Listen 80Listen 8080 # Virtual hostsInclude conf/extra/httpd- ...

  6. Eclipse_常用技巧_02_使用Eclipse进行源码分析

    1.分析java类和接口的继承关系 具体做法: 在代码区中选择需要的类和接口定义,然后右击,选择“Open Type Hiberarchy”,可以在“Hiberarchy View”中看到继承关系 快 ...

  7. Oracle忘记用户名密码

    一.oracle 11g登录服务开启 成功安装Oracle 11g后,共有7个服务,这七个服务的含义分别为:1. Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写 ...

  8. PLSQL Developer安装、配置、连接oracle数据库

    0.资源准备 1) PLSQL Developer安装包(由于安装包超过10M,无法上传,请自行下载) 2) instantclient_11_2安装包(由于安装包超过10M,无法上传,请自行下载) ...

  9. Oracle 12c 多租户在 CDB 中 Plug A PDB,Unplugging A PDB

    Oracle 数据库 12 c 中介绍了多租户选项允许单个容器数据库 (CDB) 来承载多个单独的可插拔数据库 (PDB).本文简单的演示了如何在 CDB 中 Plug A PDB,Unpluggin ...

  10. 动态webService

    using System; using System.Net; using System.IO; using System.CodeDom; using Microsoft.CSharp; using ...