<!--

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

parent取得很明确就是当前元素的父元素

parents则是当前元素的祖先元素

-->

<html>

    <head></head>

    <body>

        <div id="div1">

        <div id="div2"><p></p></div>

        <div id="div3" class="a"><p></p></div>

        <div id="div4"><p></p></div>

        </div>

    </body>

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

        $("p").parent();              //取得的是div2、div3、div4

        $('p').parent('.a');        //取得是div3

        $('p').parent().parent();    //取得是div1（这点比较奇特，不过Jquery对象本身的特点决定了这是可行的）

        $('p').parents();            //取得的是div1、div2、div3、div4

        $('p').parents('.a');        //取得的是div3

    </script>

</html>
    <body>

        <table>

            <tr>

                <td><input id="btn1" class="btn" type="button" value="test"/></td>

                <td>some text</td>

            </tr>

        </table>

    </body>

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>

    <script type="text/javascript">

    $(function(){

        $("#btn1").click(function(){

            alert($(this).parent().next().html());

            });

        });

打印结果：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。

另一个例子中：

<div>

     <p>Hello</p>

     <p>Hello</p>

</div>

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

有关parents

 <div id="one">

        <div id="Two">hello</div>

        <div id="Three">

            <p><a href="#">tonsh</a></p>

        </div>

</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(找到某一特定的祖先元素)用法（转发：https://blog.csdn.net/cui_angel/article/details/7903704）的更多相关文章

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

    <!-- 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 实现密码框的显示与隐藏【转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069】

    <html> <head>  <script type="text/JavaScript"  src="jQuery-1.5.1.min.j ...

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

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

  6. Jquery中parent()和parents()

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

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

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

  8. jQuery的parent和parents和closest区别

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

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

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

随机推荐

  1. centos内核基本调优

    一.内核(/etc/sysctl.conf) 1.加大端口号范围net.ipv4.ip_local_port_range = 10240 65000 2.tcp/ip重用及超时限制net.ipv4.t ...

  2. MVVM模式源码分析手写实现

    1.demo1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. _.pick lodash

    http://lodash.think2011.net/pick _.pick(object, [props]) 创建一个从 object 中选中的属性的对象. 参数 object (Object) ...

  4. Nginx实现虚拟主机

    因为IP地址有限,因此经常存在多个主机域名对应着同一个IP地址的情况,可以通过配置虚拟主机来解决这个问题. 在nginx.conf中,每个server块就是一个虚拟主机,它只会处理与其server_n ...

  5. 介绍C#结构体与类区别

    1. 结构体与类定义方式 结构体定义使用struct类定义使用class 结构体: struct testDemo{ int num; void action(){ } } 类: class test ...

  6. 自动化测试 python2.7 与 selenium 2 学习

    windows环境搭建 # 下载 python[python 开发环境] http://python.org/getit/ # 下载 setuptools [python 的基础包工具]setupto ...

  7. 【Oracle】使用BBED跳过丢失的归档

    在recover datafile的过程其中假设丢失了须要的归档将使得recover无法进行.使用bbed工具能够跳过丢失的归档进行recover datafile. 实验步骤例如以下: SYS@OR ...

  8. appearance 设置公共属性

    //设置公共TabBarItem 的属性 [UITabBarItem appearance] //设置公共NavigationBar 的属性 [UIBarButtonItem appearance]

  9. [译]GLUT教程 - 整合代码6

    Lighthouse3d.com >> GLUT Tutorial >> Extras >> The Code So Far VI 下面代码以窗体模式启动.你可以在 ...

  10. emacs的常用配置备份

    据说有人搞丢了自己的emacs的配置,然后一怒之下抛弃了emacs投身vim,我还是做个emacs配置的备份吧, 虽然我现在也算不上emacs的发烧友. 这里的配置大多是从网上参考的,最多的是下面的链 ...