当前位置:Web前端 > jquery> 正文

Jquery中parent()和parents()

时间:2014-9-20类别:Web前端

Jquery中parent()和parents()

Jquery中parent()和parents()

一、parent()方法

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

 二、parents()方法

此方法取得一个包含着所有匹配元素的父辈元素的元素集合。所取得的父辈元素集合也可以使用表达式进行筛选

如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。.

三、Jquery中parent()和parents()实例

  •  
  • HTML 代码   复制
  • 
    <li id='li1'>
    <li id='li2'><p></p></li>
    <li id='li3' class='a'><p></p></li>
    <li id='li4'><p></p></li>
    </li>
    
        $('p').parent() //取到的是li2,li3,li4
        $('p').parent('.a')  //取到的是li3
    
    					

        $('p').parent().parent()   //取到的是li1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。

        $('p').parents()   //取到的是li1,li2,li3,li4

        $('p').parents('.a')   //取到的是li3

     

  • HTML 代码   复制
  • 
    
    <body>
    <li id="one">
    <li id="two">hello</li>
    <li id="three">
    <p>
    <a href="#">tonsh</a>
    </p>
    </li>
    </li>
    
       $(”a”).parent()  //将会得到父对象<p>
    
    			

       $(”a”).parents()   //得到父对象为<p><li.3><li.1>

       $(”a”).parents().filter(”li”)   //将得到<li.3><li.1>,还可以写成$(”a”).parents(”li”)。

       $(”a”).parents(”li:eq(0)”)   //将得到<li.2>

       var id=$("a").parents("li:eq(1)").children("li:eq(0)").html();   //如果点击<a>链接时弹出<li.2>中的内容

       </body>

     

  • 标签:
    上一篇下一篇

    猜您喜欢

    热门推荐