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. POJ 3928 Ping pong（树状数组+两次）

    题意:每个人都有一个独特的排名(数字大小)与独特的位置(从前往后一条线上),求满足排名在两者之间并且位置也在两者之间的三元组的个数 思路:单去枚举哪些数字在两者之间只能用O(n^3)时间太高,但是可以 ...

  2. BZOJ 3296 [USACO2011 Open] Learning Languages：并查集

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3296 题意: 农夫约翰的N(2 <= N <= 10,000)头奶牛,编号为1 ...

  3. artDialog 简单使用！

    简介 artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验. 功能: 支持锁定屏幕(遮罩).模拟alert和confirm.多窗口弹出.静止 ...

  4. JS多项选择删除

    $(document).ready(function(){ $("#batdel").click(function(){ var checkedLen = 0; var check ...

  5. 分享知识-快乐自己：虚拟机 NET 网络配置

    第一步: 第二步: 第三步:   第四步:   第五步: 第六步: 第七步: 第九步: 第十步: 第十一步: 第十二步:   第十三步: 成功. 第十四步:开启开机自启动网路连接 cd /etc/sy ...

  6. Data URI Scheme,base64

    一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...

  7. MySQL--Basic（二）

    USE db_name; CREATE DATABASE school; Use school; CREATE TABLE `StuInfo` ( `STU_ID` ) NOT NULL , `STU ...

  8. Netty组件理解（转载）

    转载的文章,写的非常好.   一.先纵览一下Netty,看看Netty都有哪些组件?        为了更好的理解和进一步深入Netty,我们先总体认识一下Netty用到的组件及它们在整个Netty架 ...

  9. Convolutional Neural Networks for Visual Recognition 1

    Introduction 这是斯坦福计算机视觉大牛李菲菲最新开设的一门关于deep learning在计算机视觉领域的相关应用的课程.这个课程重点介绍了deep learning里的一种比较流行的模型 ...

  10. 尴尬的app:layout_scrollFlags="scroll|enterAlways" 配合NavigationDrawer

    昨天想到了NavigationDrawer中Item点击的问题. 点击Drawer中的一个Item需要到一个新的页面,你是应该打开一个新的Activity呢还是直接用fragment呢? 如果打开新的 ...