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下利用arguments实现string.format函数
Aug 24 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
基于JavaScript实现省市联动效果
Jun 22 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知识收集
2012/08/20 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Python原始套接字编程实例解析
2020/01/29 Python
python中with用法讲解
2020/02/07 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python自动登录QQ的实现示例
2020/08/28 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
年终总结会主持词
2014/03/25 职场文书
创建青年文明号材料
2014/05/09 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
民主生活会主持词
2015/07/01 职场文书
户外拓展训练感想
2015/08/07 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang