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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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更快的提供文件下载的代码
2012/06/13 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
用JS实现选项卡
2020/03/23 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python 函数基础知识汇总
2018/03/09 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
keras多显卡训练方式
2020/06/10 Python
Python创建临时文件和文件夹
2020/08/05 Python
Python requests接口测试实现代码
2020/09/08 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
党支部书记先进事迹
2014/01/17 职场文书
大学生创业策划书
2014/02/02 职场文书
设备管理实施方案
2014/05/31 职场文书
工程移交协议书
2016/03/24 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript