jquery parent和parents的區(qū)別分析
更新時間：2013年10月02日 16:04:09 作者：
從字面上不難看出parent是指取得一個包含著所有匹配元素的唯一父元素的元素集合。parents則是取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）?？梢酝ㄟ^一個可選的表達式進行篩選
可以看出parent的取值很明確，就是當前元素的父元素；parents則是當前元素的祖先元素。下面列出例子說明：
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，這點比較奇特；不過Jquery對象本身的特點決定了這是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
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
例子中：
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>對象，因為p標簽的父標簽是div
復制代碼 代碼如下:
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，這點比較奇特；不過Jquery對象本身的特點決定了這是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
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
例子中：
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>對象，因為p標簽的父標簽是div
您可能感興趣的文章:
- jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- jquery中的查找parents與closest方法之間的區(qū)別
- jQuery 遍歷- 關于closest() 的方法介紹以及與parents()的方法區(qū)別分析
- jQuery對val和atrr("value")賦值的區(qū)別介紹
- JQuery中的html()、text()、val()區(qū)別示例介紹
- 淺析JQuery中的html(),text(),val()區(qū)別
- jquery中$(#form :input)與$(#form input)的區(qū)別
- jQuery中attr()和prop()在修改checked屬性時的區(qū)別
- jquery中map函數(shù)與each函數(shù)的區(qū)別實例介紹
- jQuery中parents()和parent()的區(qū)別分析
相關文章
本文給大家整理了9款基于jQuery的圖片滑塊焦點圖插件，效果都非常炫酷，演示和下載地址都給大家整理好了，有需要的小伙伴直接拿走吧，不用跟我客氣^_^2014-12-12
這篇文章主要介紹了jquery實現(xiàn)翻動fadeIn顯示的方法,實例分析了jQuery中fadeIn方法的使用技巧,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了基于jquery編寫的放大鏡插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了jQuery晃動層特效實現(xiàn)方法,實例分析了animate方法與css樣式的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery EasyUI API 中文文檔 - Panel面板
jQuery EasyUI API 中文文檔 - Panel面板，使用jQuery EasyUI的朋友可以參考下。2011-09-09
jQuery中常用getJSON來調(diào)用并獲取遠程的JSON字符串，將其轉(zhuǎn)換為JSON對象，如果成功，則執(zhí)行回調(diào)函數(shù)。2011-03-03
取選中的radio的值2010-01-01
ASP.NET jQuery 實例10 動態(tài)修改hyperlink的URL值
這節(jié)我們來看下如何實現(xiàn)通過選擇RadioButtonList值動態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別2012-02-02
jQuery的Cookie封裝,與PHP交互的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨Query的Cookie封裝,與PHP交互的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
利用jQuery treetable實現(xiàn)樹形表格拖拽詳解
這篇文章主要為大家介紹了如何利用jQuery treetable實現(xiàn)樹形表格拖拽功能，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-06-06