|
|
<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ū)別用戶(hù)點(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==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，感覺(jué)比較巧妙。
JavaScript技術(shù)：js查找父節(jié)點(diǎn)的簡(jiǎn)單方法，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
