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获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
一个小型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实现二维数组根据key进行排序的方法
2016/12/30 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python实现石头剪刀布程序
2021/01/20 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python实现元素等待代码实例
2019/11/11 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
基于Python实现简单学生管理系统
2020/07/24 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python图片合成的示例
2020/11/09 Python
python IP地址转整数
2020/11/20 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
工作态度检讨书
2014/02/11 职场文书
政治表现评语
2014/05/04 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书