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实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
javascript各种复制代码收集
Sep 20 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
js charAt的使用示例
Feb 18 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Less 安装及基本用法
May 05 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
详解php中反射的应用
2016/03/15 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
对Python3 pyc 文件的使用详解
2019/02/16 Python
python实现扫描ip地址的小程序
2019/04/16 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
英语简历自我评价
2014/01/26 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
入党介绍人考察意见
2015/06/01 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Python OpenCV实现图形检测示例详解
2022/04/08 Python