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 定位input元素的几种方法小结
Jul 28 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
一分钟理解js闭包
May 04 Javascript
微信JS接口大全
Aug 25 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
vue.js的安装方法
2017/05/12 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Cython 三分钟入门教程
2009/09/17 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
python3 xpath和requests应用详解
2020/03/06 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
英语道歉信范文
2014/01/09 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
纪律教育月活动总结
2014/08/26 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
基层党支部承诺书
2015/04/30 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书