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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
浅谈js数据类型判断与数组判断
Aug 29 Javascript
Javascript动画效果(1)
Oct 11 Javascript
深入理解React高阶组件
Sep 28 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
vscode调试node.js的实现方法
Mar 22 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python3基础之基本数据类型概述
2014/08/13 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python二维码生成识别实例详解
2019/07/16 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
毕业生求职信
2014/06/10 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
世界气象日活动总结
2015/02/27 职场文书
《正比例》教学反思
2016/02/23 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Kubernetes控制节点的部署
2022/04/01 Servers