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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 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类的注册与自动加载
2013/07/05 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Django的性能优化实现解析
2019/07/30 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
美国折扣网站:jClub
2017/08/07 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
应聘教师自荐信
2013/10/12 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
党员实事承诺书
2014/03/26 职场文书
青年文明号服务承诺
2014/03/31 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
Python 正则模块详情
2021/11/02 Python
Python各协议下socket黏包问题原理
2022/04/12 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python