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>

标签：

jquery

Jquery中parent()和parents()

Jquery中parent()和parents()

猜您喜欢

热门推荐