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

2019-11-21 01:59:05

字體：大中小

供稿：網(wǎng)友

<div>
       <a href="#">標題</a>
       <ul id="demo">
           <li><a href="#" onclick="selectThisItem(this)">項目一</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)">項目一</a></li>
           <li><a href="#" onclick="selectThisItem(this)">項目</a></li>
       </ul>
</div>

上面的代碼中，在點擊項目或子類時，因為觸發(fā)的事件一樣，參數(shù)也一樣，能區(qū)別用戶點擊的到底是“項目x”還是“子類x”，除了this.innerHTML來判斷它們的內(nèi)在文字外，還可以根據(jù)它們在以<ul id="demo">元素為根節(jié)點的xml文檔中的縱向位置(節(jié)點深度)來區(qū)別，比如“項目一”在<ul id="demo">中的節(jié)點深度是2，“子類一”的節(jié)點深度是4.

計算節(jié)點深度在排除遞歸方法后，找到了一個更為簡單的方法：

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;} //找不到目標父節(jié)點，防止死循環(huán)
   }
}

函數(shù)的返回值是索引數(shù)字，如果入口節(jié)點與查找的父節(jié)點相同（即同一個元素），返回值為0，向上循環(huán)找到父節(jié)點后返回向上查找的節(jié)點級數(shù)，如果向上查找，到了整個頁面的根節(jié)點，比如是<html>，還找不到，就返回-1，并結(jié)束循環(huán)。

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

上一篇：分享別人寫的一個小型js框架

下一篇：根據(jù)地區(qū)不同顯示時間的javascript代碼