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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
js创建元素(节点)示例
Jan 02 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
JavaScript计算正方形面积
Nov 26 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
jQuery实现增删改查
Dec 22 jQuery
jQuery冲突问题解决方法
Jan 19 jQuery
根据地区不同显示时间的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
WHOIS类的修改版
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python基础之入门必看操作
2017/07/26 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
单利模式及python实现方式详解
2018/03/20 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python数学形态学实例分析
2019/09/06 Python
python中pdb模块实例用法
2021/01/15 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
电气自动化大学生求职信
2013/10/16 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
运动会广播稿200字
2014/01/15 职场文书
党员领导干部承诺书
2014/05/28 职场文书
欢度春节标语
2014/07/01 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2019广播稿怎么写
2019/04/17 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS