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 面向对象编程 万物皆对象
Sep 17 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
js实现坦克大战游戏
Feb 24 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
php 多文件上传的实现实例
2016/10/23 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
python3实现逐字输出的方法
2019/01/23 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Django之模板层的实现代码
2019/09/09 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
中学门卫岗位职责
2013/12/26 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
劳动模范事迹材料
2014/01/19 职场文书
庆七一活动方案
2014/01/25 职场文书
联谊活动策划书
2014/01/26 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
SpringBoot生成License的实现示例
2021/06/16 Java/Android
MySQL数据库 安全管理
2022/05/06 MySQL