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 autocomplete插件修改
Apr 17 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python 实现插入排序算法
2012/06/05 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
公司前台接待岗位职责
2013/12/03 职场文书
个人授权委托书范本
2014/04/03 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
2014年实习生工作总结
2014/11/27 职场文书
大学生党性分析材料
2014/12/19 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android