js查找父節(jié)點(diǎn)的簡(jiǎn)單方法
更新時(shí)間:2008年06月28日 00:35:07 作者:
用javascript實(shí)現(xiàn)的查找父節(jié)點(diǎn)的代碼,方法比較不錯(cuò)
<div>
<a href="#">標(biāo)題</a>
<ul id="demo">
<li><a href="#" onclick="selectThisItem(this)">項(xiàng)目一</a></li>
<ul>
<li><a href="#" onclick="selectThisItem(this)">子類一</a></li>
<li><a href="#" onclick="selectThisItem(this)">子類二</a></li>
</ul>
<li><a href="#" onclick="selectThisItem(this)">項(xiàng)目一</a></li>
<li><a href="#" onclick="selectThisItem(this)">項(xiàng)目</a></li>
</ul>
</div>
上面的代碼中,在點(diǎn)擊項(xiàng)目或子類時(shí),因?yàn)橛|發(fā)的事件一樣,參數(shù)也一樣,能區(qū)別用戶點(diǎn)擊的到底是“項(xiàng)目x”還是“子類x”,除了this.innerHTML來(lái)判斷它們的內(nèi)在文字外,還可以根據(jù)它們?cè)谝?lt;ul id="demo">元素為根節(jié)點(diǎn)的xml文檔中的縱向位置(節(jié)點(diǎn)深度)來(lái)區(qū)別,比如“項(xiàng)目一”在<ul id="demo">中的節(jié)點(diǎn)深度是2,“子類一”的節(jié)點(diǎn)深度是4.
計(jì)算節(jié)點(diǎn)深度在排除遞歸方法后,找到了一個(gè)更為簡(jiǎn)單的方法:
function parentIndexOf(node,parent){
if(node==parent){return 0;}
for (var i=0,n=node; n=n.parentNode; i++){
if(n==parent){return i;}
if(n==document.documentElement){return -1;} //找不到目標(biāo)父節(jié)點(diǎn),防止死循環(huán)
}
}
函數(shù)的返回值是索引數(shù)字,如果入口節(jié)點(diǎn)與查找的父節(jié)點(diǎn)相同(即同一個(gè)元素),返回值為0,向上循環(huán)找到父節(jié)點(diǎn)后返回向上查找的節(jié)點(diǎn)級(jí)數(shù),如果向上查找,到了整個(gè)頁(yè)面的根節(jié)點(diǎn),比如是<html>,還找不到,就返回-1,并結(jié)束循環(huán)。
返回值與String對(duì)象內(nèi)置的indexOf方法相似。函數(shù)的關(guān)鍵是for的第二個(gè)參數(shù)n=n.parentNode,感覺比較巧妙。
<a href="#">標(biāo)題</a>
<ul id="demo">
<li><a href="#" onclick="selectThisItem(this)">項(xiàng)目一</a></li>
<ul>
<li><a href="#" onclick="selectThisItem(this)">子類一</a></li>
<li><a href="#" onclick="selectThisItem(this)">子類二</a></li>
</ul>
<li><a href="#" onclick="selectThisItem(this)">項(xiàng)目一</a></li>
<li><a href="#" onclick="selectThisItem(this)">項(xiàng)目</a></li>
</ul>
</div>
上面的代碼中,在點(diǎn)擊項(xiàng)目或子類時(shí),因?yàn)橛|發(fā)的事件一樣,參數(shù)也一樣,能區(qū)別用戶點(diǎn)擊的到底是“項(xiàng)目x”還是“子類x”,除了this.innerHTML來(lái)判斷它們的內(nèi)在文字外,還可以根據(jù)它們?cè)谝?lt;ul id="demo">元素為根節(jié)點(diǎn)的xml文檔中的縱向位置(節(jié)點(diǎn)深度)來(lái)區(qū)別,比如“項(xiàng)目一”在<ul id="demo">中的節(jié)點(diǎn)深度是2,“子類一”的節(jié)點(diǎn)深度是4.
計(jì)算節(jié)點(diǎn)深度在排除遞歸方法后,找到了一個(gè)更為簡(jiǎn)單的方法:
function parentIndexOf(node,parent){
if(node==parent){return 0;}
for (var i=0,n=node; n=n.parentNode; i++){
if(n==parent){return i;}
if(n==document.documentElement){return -1;} //找不到目標(biāo)父節(jié)點(diǎn),防止死循環(huán)
}
}
函數(shù)的返回值是索引數(shù)字,如果入口節(jié)點(diǎn)與查找的父節(jié)點(diǎn)相同(即同一個(gè)元素),返回值為0,向上循環(huán)找到父節(jié)點(diǎn)后返回向上查找的節(jié)點(diǎn)級(jí)數(shù),如果向上查找,到了整個(gè)頁(yè)面的根節(jié)點(diǎn),比如是<html>,還找不到,就返回-1,并結(jié)束循環(huán)。
返回值與String對(duì)象內(nèi)置的indexOf方法相似。函數(shù)的關(guān)鍵是for的第二個(gè)參數(shù)n=n.parentNode,感覺比較巧妙。
您可能感興趣的文章:
- JS 使用for循環(huán)遍歷子節(jié)點(diǎn)查找元素
- javascript下查找父節(jié)點(diǎn)的簡(jiǎn)單方法
- js查找節(jié)點(diǎn)的方法小結(jié)
- JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
- javascript基礎(chǔ)之查找元素的詳細(xì)介紹(訪問(wèn)節(jié)點(diǎn))
- js遍歷子節(jié)點(diǎn)子元素附屬性及方法
- javascript 節(jié)點(diǎn)遍歷函數(shù)
- JS獲取子節(jié)點(diǎn)、父節(jié)點(diǎn)和兄弟節(jié)點(diǎn)的方法實(shí)例總結(jié)
- javascript獲取網(wǎng)頁(yè)中指定節(jié)點(diǎn)的父節(jié)點(diǎn)、子節(jié)點(diǎn)的方法小結(jié)
- javascript得到XML某節(jié)點(diǎn)的子節(jié)點(diǎn)個(gè)數(shù)的腳本
- JS查找孩子節(jié)點(diǎn)簡(jiǎn)單示例
相關(guān)文章
js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08小程序?qū)崿F(xiàn)按下錄音松開識(shí)別語(yǔ)音
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)按下錄音松開識(shí)別語(yǔ)音,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開效果實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開效果,結(jié)合具體實(shí)例形式分析了javascript事件響應(yīng)及針對(duì)頁(yè)面元素屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09根據(jù)身份證號(hào)自動(dòng)輸出相關(guān)信息(籍貫,出身日期,性別)
為了減少客戶的在頁(yè)面的輸入,做了這個(gè)效果,他可以根據(jù)用戶輸入的身份證號(hào)輸出籍貫、出身日期、性別的相關(guān)信息,需要的朋友可以參考下2013-11-11ECMAScript6塊級(jí)作用域及新變量聲明(let)
這篇文章主要介紹了ECMAScript6塊級(jí)作用域及新變量聲明(let) 的相關(guān)資料,需要的朋友可以參考下2015-06-06javascript實(shí)現(xiàn)支付寶滑塊驗(yàn)證碼效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)支付寶滑塊驗(yàn)證碼效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07