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 闭包在封装函数时的简单分析
Nov 28 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
js实现图片轮播效果
Dec 19 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
非常好的php目录导航文件代码
2006/10/09 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
layui导航栏实现代码
2017/05/19 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
用Python实现数据的透视表的方法
2018/11/16 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
基于Python实现简单学生管理系统
2020/07/24 Python
荟萃全球保健品:维他购
2018/05/09 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
关于母亲节的感言
2014/02/04 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
JavaScript文档对象模型DOM
2021/11/20 Javascript
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
js前端图片加载异常兜底方案
2022/06/21 Javascript