快捷導(dǎo)航

javascript下查找父節(jié)點(diǎn)的簡(jiǎn)單方法

更新時(shí)間：2007年08月13日 19:16:18 作者：

<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)">子類(lèi)一</a></li>
                   <li><a href="#" onclick="selectThisItem(this)">子類(lèi)二</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)目或子類(lèi)時(shí)，因?yàn)橛|發(fā)的事件一樣，參數(shù)也一樣，能區(qū)別用戶點(diǎn)擊的到底是“項(xiàng)目x”還是“子類(lèi)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，“子類(lèi)一”的節(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==p){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，感覺(jué)比較巧妙。

您可能感興趣的文章:

javascript下查找父節(jié)點(diǎn)的簡(jiǎn)單方法

相關(guān)文章

javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)json頁(yè)面分頁(yè)實(shí)例代碼,需要的朋友可以參考下
2014-02-02
jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
為了滿足用戶體驗(yàn)度，使用SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框效果非常好，下面通過(guò)這篇文章給大家介紹jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框，需要的朋友可以參考下
2015-08-08
ES6中異步對(duì)象Promise用法詳解
這篇文章主要介紹了ES6中異步對(duì)象Promise用法,對(duì)比ES5分析了ES6異步方法Promise的使用技巧,并結(jié)合實(shí)例形式分析了連續(xù)使用Promise對(duì)象、Promise捕獲錯(cuò)誤的catch()、以及Promise的高級(jí)用法,需要的朋友可以參考下
2019-07-07
微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)一個(gè)簡(jiǎn)單swiper代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
JS?的繼承方式與使用場(chǎng)景對(duì)比分析
本文介紹了JavaScript中六種主要的繼承實(shí)現(xiàn)方式及其適用場(chǎng)景,并推薦在現(xiàn)代項(xiàng)目中優(yōu)先使用ES6的class繼承,每種繼承方式都有其特點(diǎn)和適用范圍,選擇合適的繼承方式對(duì)于編寫(xiě)清晰、高效的JavaScript代碼至關(guān)重要,感興趣的朋友一起看看吧
2025-02-02
探索JavaScript中私有成員的相關(guān)知識(shí)
這篇文章主要介紹了探索JavaScript中私有成員的相關(guān)知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
十分鐘教你上手ES2020新特性
這篇文章主要介紹了十分鐘教你上手ES2020新特性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JavaScript中判斷整字類(lèi)型最簡(jiǎn)潔的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript中判斷整字類(lèi)型最簡(jiǎn)潔的實(shí)現(xiàn)方法,本文給出多個(gè)判斷整數(shù)的方法,最后總結(jié)出一個(gè)最短、最簡(jiǎn)潔的實(shí)現(xiàn)方法,需要的朋友可以參考下
2014-11-11
兼容Firefox的Javascript XSLT 處理XML文件
這篇文章主要介紹了兼容Firefox的Javascript XSLT 處理XML文件,需要的朋友可以參考下
2014-12-12
在CSS里寫(xiě)復(fù)雜的JavaScript腳本
在IE下,CSS里可以寫(xiě)入JavaScript腳本,不過(guò),要用expression套住. 雖然可以這樣,但是由于是在CSS里,這個(gè)特殊地方,所以,不能寫(xiě)成如下這樣: width:expression(if(...){}else{...})
2008-04-04