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 21 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
js友好的时间返回函数
Aug 24 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
js读写(删除)Cookie实例详解
2013/04/17 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
canvas 绘制圆形时钟
2017/02/22 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python sort、sort_index方法代码实例
2019/03/28 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
EJB timer的种类
2014/10/28 面试题
幼师自我鉴定
2014/02/01 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python