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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
vue构建单页面应用实战
Apr 10 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
jQuery实现视频展示效果
May 30 jQuery
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
咖啡常见的种类
2021/03/03 新手入门
图书管理程序(二)
2006/10/09 PHP
php str_pad 函数用法简介
2009/07/11 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP中phar包的使用教程
2017/06/14 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
利用js对象弹出一个层
2008/03/26 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Python编程argparse入门浅析
2018/02/07 Python
python 定时修改数据库的示例代码
2018/04/08 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
中班中秋节活动反思
2014/02/18 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
MySQL的Query Cache图文详解
2021/07/01 MySQL
Golang实现可重入锁的示例代码
2022/05/25 Golang