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验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 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
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
用js编写留言板
2020/03/17 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python单元测试实例详解
2018/05/25 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
详解python中index()、find()方法
2019/08/29 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
优秀班主任申报材料
2014/12/16 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
浅析Python实现DFA算法
2021/06/26 Python