|
<a href="#">標(biāo)題</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;} //找不到目標(biāo)父節(jié)點,防止死循環(huán)
}
}
函數(shù)的返回值是索引數(shù)字,如果入口節(jié)點與查找的父節(jié)點相同(即同一個元素),返回值為0,向上循環(huán)找到父節(jié)點后返回向上查找的節(jié)點級數(shù),如果向上查找,到了整個頁面的根節(jié)點,比如是<html>,還找不到,就返回-1,并結(jié)束循環(huán)。
返回值與String對象內(nèi)置的indexOf方法相似。函數(shù)的關(guān)鍵是for的第二個參數(shù)n=n.parentNode,感覺比較巧妙。
JavaScript技術(shù):javascript下查找父節(jié)點的簡單方法,轉(zhuǎn)載需保留來源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請第一時間聯(lián)系我們修改或刪除,多謝。