js查找父节点的简单方法


Posted in Javascript onJune 28, 2008

<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==parent){return i;}
        if(n==document.documentElement){return -1;} //找不到目标父节点,防止死循环
    }
}
函数的返回值是索引数字,如果入口节点与查找的父节点相同(即同一个元素),返回值为0,向上循环找到父节点后返回向上查找的节点级数,如果向上查找,到了整个页面的根节点,比如是<html>,还找不到,就返回-1,并结束循环。

返回值与String对象内置的indexOf方法相似。函数的关键是for的第二个参数n=n.parentNode,感觉比较巧妙。

Javascript 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
一个小型js框架myJSFrame附API使用帮助
Jun 28 #Javascript
JavaScript 给汉字排序实例代码
Jun 28 #Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 #Javascript
JS解密入门 最终变量劫持
Jun 25 #Javascript
JS解密入门之凭直觉解
Jun 25 #Javascript
js异或加解密效果代码
Jun 25 #Javascript
asp批量修改记录的代码
Jun 25 #Javascript
You might like
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
js实现双色球效果
2020/08/02 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
用python写爬虫简单吗
2020/07/28 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
师范类求职信
2014/06/21 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2015年三万活动总结
2015/03/25 职场文书
终止劳动合同通知书
2015/04/16 职场文书
大学开学感言
2015/08/01 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS