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遍历checkbox获取选中项value值的方法
Feb 13 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Vue.js动态组件解析
Sep 09 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
第九节--绑定
2006/11/16 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
php-fpm中max_children的配置
2019/03/15 PHP
JS input 数字验证代码
2009/07/30 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
九年级化学教学反思
2014/01/28 职场文书
职位说明书范文
2014/05/07 职场文书
组织鉴定材料
2014/06/02 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
医院见习报告范文
2014/11/03 职场文书
处罚决定书范文
2015/06/24 职场文书