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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue el-table实现自定义表头
Dec 11 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php图片缩放实现方法
2014/02/20 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python友情链接检查方法
2015/07/08 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python处理session的方法整理
2019/08/29 Python
介绍一下JMS编程步骤
2015/09/22 面试题
劳动竞赛活动方案
2014/02/20 职场文书
高三高考决心书
2014/03/11 职场文书
六五普法宣传标语
2014/10/06 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
保留意见审计报告
2015/06/05 职场文书
社会实践单位意见
2015/06/05 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android