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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js获取json元素数量的方法
Jan 27 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
JavaScript类的写法
2016/09/17 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
React中如何引入Angular组件详解
2018/08/09 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
python命令行参数sys.argv使用示例
2014/01/28 Python
Python with的用法
2014/08/22 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
使用python实现画AR模型时序图
2019/11/20 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
销售行业个人求职自荐信
2013/09/25 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
选秀节目策划方案
2014/06/06 职场文书
倡议书怎么写?
2019/04/11 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL