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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
Vue和Flask通信的实现
May 19 Vue.js
根据地区不同显示时间的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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
JS前端笔试题分析
2016/12/19 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
深入解析Python中的线程同步方法
2016/06/14 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
pandas.cut具体使用总结
2019/06/24 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
物业管理个人自我评价
2013/11/08 职场文书
三好学生自我鉴定
2013/12/17 职场文书
党员个人公开承诺书
2014/08/29 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
冰峪沟导游词
2015/02/09 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS