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限制textarea每行输入字符串长度的代码
Oct 31 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php split汉字
2009/06/05 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP Include文件实例讲解
2019/02/15 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python如何读取、写入CSV数据
2020/07/28 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
留学推荐信写作指南
2014/01/25 职场文书
医院总经理岗位职责
2014/02/04 职场文书
数学教研活动总结
2014/07/02 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL