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


Posted in Javascript onAugust 13, 2007

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

上面的代码中,在点击项目或子类时,因为触发的事件一样,参数也一样,能区别用户点击的到底是“项目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,感觉比较巧妙。

Javascript 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
小程序api实现promise封装过程解析
Nov 21 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
根据地区不同显示时间的javascript代码
Aug 13 #Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 #Javascript
Track Image Loading效果代码分析
Aug 13 #Javascript
不错的JS中变量相关的细节分析
Aug 13 #Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 #Javascript
TopList标签和JavaScript结合两例
Aug 12 #Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
js验证表单第二部分
2006/11/25 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
详解Python中的日志模块logging
2015/06/19 Python
python简单分割文件的方法
2015/07/30 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
请解释virtual关键字的含义
2015/06/17 面试题
抽奖活动主持词
2014/03/31 职场文书
求职个人评价范文
2014/04/09 职场文书
员工合理化建议书
2014/05/19 职场文书
员工年终考核评语
2014/12/31 职场文书
红歌会主持词
2015/07/02 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
spring 项目实现限流方法示例
2022/07/15 Java/Android