JavaScript 查找父节点索引的简洁实现

HTML 结构示例与问题背景

<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>

在上述 HTML 结构中，点击项目或子类时触发相同的事件处理函数，且传入的参数均为 this。为了区分用户点击的是“项目x”还是“子类x”，除了通过 innerHTML 判断文本内容外，还可以依据节点在以 <ul id="demo"> 为根节点的文档树中的纵向位置（即节点深度）进行区分。例如，“项目一”相对于 <ul id="demo"> 的节点深度为 2，而“子类一”的深度为 4。

parentIndexOf 函数实现与逻辑解析

在排除递归实现后，找到了一种更为简洁的计算节点深度的方法：

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;} //找不到目标父节点，防止死循环

该函数的返回值是一个索引数字。如果入口节点与查找的父节点相同（即同一个元素），则返回 0；若向上循环查找至目标父节点，则返回向上查找的层级数；若一直查找到整个页面的根节点（如 <html>）仍未找到目标，则返回 -1 并结束循环。

此返回值的行为与 String 对象内置的 indexOf 方法相似。该函数的核心技巧在于 for 循环的第二个参数 n=n.parentNode，这种写法较为巧妙。