javascript下查找父节点的简单方法

张坊99

张坊99

2016-02-19 09:18

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享javascript下查找父节点的简单方法吧。
div
       a href="#"标题/a
       ul id="demo"
           lia href="#" onclick="selectThisItem(this)"项目一/a/li
               ul
                   lia href="#" onclick="selectThisItem(this)"子类一/a/li
                   lia href="#" onclick="selectThisItem(this)"子类二/a/li
               /ul
           lia href="#" onclick="selectThisItem(this)"项目一/a/li
           lia href="#" onclick="selectThisItem(this)"项目/a/li
       /ul
/div


上面的代码中,在点击项目或子类时,因为触发的事件一样,参数也一样,能区别用户点击的到底是“项目x”还是“子类x”,除了this.innerHTML来判断它们的内在文字外,还可以根据它们在以ul id="demo"元素为根节点的xml文档中的纵向位置(节点深度)来区别,比如“项目一”在ul id="demo"中的节点深度是2,“子类一”的节点深度是4.

计算节点深度在排除递归方法后,找到了一个更为简单的方法:



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


函数的返回值是索引数字,如果入口节点与查找的父节点相同(即同一个元素),返回值为0,向上循环找到父节点后返回向上查找的节点级数,如果向上查找,到了整个页面的根节点,比如是html,还找不到,就返回-1,并结束循环。

返回值与String对象内置的indexOf方法相似。函数的关键是for的第二个参数n=n.parentNode,感觉比较巧妙。
展开更多 50%)
分享

猜你喜欢

javascript下查找父节点的简单方法

Web开发
javascript下查找父节点的简单方法

Javascript动态创建 style 节点

Web开发
Javascript动态创建 style 节点

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Mac下查找隐藏壁纸的方法

电脑入门
Mac下查找隐藏壁纸的方法

退烧的简单方法

宝宝 育儿
退烧的简单方法

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

几个简单方法

减肥 健康减肥 减肥小妙招 减肥方法
几个简单方法

丰胸的简单方法

丰胸
丰胸的简单方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

代码精简的可以实现元素圆角的js函数

代码精简的可以实现元素圆角的js函数

SQL Server 2008 R2——查找最小nIndex,nIndex存在而nIndex+1不存在 求最小连续数组中的最大值

SQL Server 2008 R2——查找最小nIndex,nIndex存在而nIndex+1不存在 求最小连续数组中的最大值
下拉加载更多内容 ↓