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 相关文章推荐
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
js实现一个简易计算器
Mar 30 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 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.NET的入门教程
2006/10/09 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
jQuery参数列表集合
2011/04/06 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Python常用列表数据结构小结
2014/08/06 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
利用python循环创建多个文件的方法
2018/10/25 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python通过实例讲解反射机制
2019/10/17 Python
python用requests实现http请求代码实例
2019/10/31 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
会计实习生工作总结的自我评价
2013/10/07 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
大二自我鉴定
2014/01/31 职场文书
社区志愿者活动方案
2014/08/18 职场文书
学习保证书
2015/01/17 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技