首頁 > web前端 > js教程 > jquery中關於​​parent和parents兩者的差異分享

jquery中關於​​parent和parents兩者的差異分享

黄舟
發布: 2017-06-23 15:32:48
原創
1643 人瀏覽過

可以看出parent的取值很明確,就是目前元素的父元素;parents則是目前元素的祖先元素。以下列出範例說明:

<p id=&#39;p1&#39;>
<p id=&#39;p2&#39;><p></p></p>
<p id=&#39;p3&#39; class=&#39;a&#39;><p></p></p>
<p id=&#39;p4&#39;><p></p></p>
</p>
登入後複製


$('p').parent()取到的是p2,p3,p4
$('p').parent('.a ')取到的是p3
$('p').parent().parent()取到的是p1,這點比較奇特;不過Jquery物件本身的特點決定了這是可行的。
$('p').parents()取到的是p1,p2,p3,p4
$('p').parents('.a')取到的是p3
parent (exp)用法:取得一個包含著所有符合元素的唯一父元素的元素集合。

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script> 
</head> 
<body> 
<table>
<tr>
      <td><input id="btn1"  class="btn" type="button"  value="test" /></td>
      <td>some text</td>
</tr>
</table>
登入後複製

其中:
this.parent()是input前面的td
this.parent().parent()取得的是tr
this.parent().parent() .parent()取得的是table
this.parent().next()取得的是td相臨的td
範例:

<p><p>Hello</p><p>Hello</p></p>
登入後複製

$("p") .parent() 得到的是:<p><p>Hello</p><p>Hello</p></p>對象,因為p標籤的父標籤是p

#jquery的parents()使用

今天遇到一個有意思的問題,jquery有兩個函數parent()和parents().透過這兩個函數可以找到一個物件的父對象,又稱作jquery的選擇器。舉個例子:

<body>
<div id="one">
<div id="two">hello</div>
<div id="three">
<p>
<a href="#">tonsh</a>
</p>
</div>
</div>
登入後複製

$(”a”).parent()將會得到父物件


$(”a”).parents()得到父物件為
$(”a”).parents().filter(”div”)將得到,還可以寫成$(”a”).parents(”div”)。
如果想的到物件可以寫成這樣:$(”a”).parents(”div:eq(0)”)。
如果點擊連結時彈出中的內容該怎麼辦?


#

以上是jquery中關於​​parent和parents兩者的差異分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板