jQuery中parents()的使用說(shuō)明
更新時(shí)間：2010年11月28日 14:52:38 作者：
今天遇到一個(gè)有意思的問(wèn)題，jquery有兩個(gè)函數(shù)parent()和parents().通過(guò)這兩個(gè)函數(shù)可以找到一個(gè)對(duì)象的父對(duì)象，又稱作jquery的選擇器。
舉個(gè)例子：
<body>
<div id="one">
<div id="two">hello</div>
<div id="three">
<p>
<a href="#">tonsh</a>
</p>
</div>
</div>
$("a").parent()將會(huì)得到父對(duì)象<p>
$("a").parents()得到父對(duì)象為<p><div.3><div.1>
$("a").parents().filter("div")將得到<div.3><div.1>,還可以寫成$("a").parents("div")。
如果想的到<div.2>對(duì)象可以寫成這樣：$("a").parents("div:eq(0)")。
如果點(diǎn)擊<a>鏈接時(shí)彈出<div.2>中的內(nèi)容該怎么辦？
var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();
alert(id);
這種類似下標(biāo)的用法很容易就得到了我們想要的內(nèi)容，只要沒(méi)有搞混這些下標(biāo)的順序。
jquery parents使用舉例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<body>
<div id="one">
<div id="two">hello</div>
<div id="three">
<p>
<a href="#">tonsh</a>
</p>
</div>
</div>
$("a").parent()將會(huì)得到父對(duì)象<p>
$("a").parents()得到父對(duì)象為<p><div.3><div.1>
$("a").parents().filter("div")將得到<div.3><div.1>,還可以寫成$("a").parents("div")。
如果想的到<div.2>對(duì)象可以寫成這樣：$("a").parents("div:eq(0)")。
如果點(diǎn)擊<a>鏈接時(shí)彈出<div.2>中的內(nèi)容該怎么辦？
復(fù)制代碼 代碼如下:
var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();
alert(id);
這種類似下標(biāo)的用法很容易就得到了我們想要的內(nèi)容，只要沒(méi)有搞混這些下標(biāo)的順序。
jquery parents使用舉例
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
jquery簡(jiǎn)單的拖動(dòng)效果實(shí)現(xiàn)原理及示例
本文為大家詳細(xì)介紹下jQuery拖曵的簡(jiǎn)單實(shí)例，具體的實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
這篇文章主要介紹了使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口,需要的朋友可以參考下2014-12-12
jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的回到頂部totop功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
jquery實(shí)現(xiàn)tab菜單切換內(nèi)容(精簡(jiǎn)版demo)
這篇文章主要為大家介紹了jquery實(shí)現(xiàn)tab菜單切換內(nèi)容的精簡(jiǎn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了jquery-mobile基礎(chǔ)屬性與用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery-mobile常用屬性功能與具體使用技巧,需要的朋友可以參考下2016-11-11
jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法,涉及jQuery針對(duì)頁(yè)面元素的循環(huán)遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
BootStrap table表格插件自適應(yīng)固定表頭(超好用)
這篇文章主要介紹了BootStrap table表格插件自適應(yīng)固定表頭(超好用)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果
這篇文章主要給大家介紹了關(guān)于ajax jquery實(shí)現(xiàn)頁(yè)面某一個(gè)div的刷新效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03