快捷導(dǎo)航

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來判斷它們的內(nèi)在文字外，還可以根據(jù)它們?cè)谝?lt;ul id="demo">元素為根節(jié)點(diǎn)的xml文檔中的縱向位置(節(jié)點(diǎn)深度)來區(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è)頁面的根節(jié)點(diǎn)，比如是<html>，還找不到，就返回-1，并結(jié)束循環(huán)。

返回值與String對(duì)象內(nèi)置的indexOf方法相似。函數(shù)的關(guān)鍵是for的第二個(gè)參數(shù)n=n.parentNode，感覺比較巧妙。

您可能感興趣的文章:

相關(guān)文章

js簡(jiǎn)單的彈出框有關(guān)閉按鈕
這篇文章主要介紹了使用js做的一個(gè)簡(jiǎn)單的彈出框且有關(guān)閉按鈕,需要的朋友可以參考下
2014-05-05
JS 攔截全局ajax請(qǐng)求實(shí)例解析
這篇文章主要介紹了JS 攔截全局ajax請(qǐng)求實(shí)例解析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11
詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼
這篇文章主要介紹了詳解如何使用微信小程序云函數(shù)發(fā)送短信驗(yàn)證碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]...
2007-05-05
JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的5種方法總結(jié)
在前臺(tái)開發(fā)中會(huì)涉及頁面跳轉(zhuǎn)的問題,下面這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript實(shí)現(xiàn)頁面跳轉(zhuǎn)的5種方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
ES6的內(nèi)置對(duì)象擴(kuò)展實(shí)現(xiàn)示例
本文主要介紹了ES6的內(nèi)置對(duì)象擴(kuò)展實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
基于javascript處理nginx請(qǐng)求過程詳解
這篇文章主要介紹了基于javascript處理nginx請(qǐng)求過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
輕松理解JavaScript閉包
閉包機(jī)制是JavaScript的重點(diǎn)和難點(diǎn)，本文希望能幫助大家輕松的學(xué)習(xí)閉包。下面跟著小編一起來看下吧
2017-03-03
js Element Traversal規(guī)范中的元素遍歷方法
對(duì)于元素間的空格，在IE9之前，都不會(huì)返回文檔節(jié)點(diǎn)，其它的所有瀏覽器都會(huì)返回文檔節(jié)點(diǎn),為了兼容瀏覽器這間的差異，又不更改已有的DOM 標(biāo)準(zhǔn)，所以有了 Element Traversal 規(guī)范
2018-04-04
微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05