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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
js word表格动态添加代码
Jun 07 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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 XML操作类DOMDocument
2009/12/16 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP微信支付开发实例
2016/06/22 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
js获取当前页面的url网址信息
2014/06/12 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
请解释在new与override的区别
2012/10/29 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
毕业生幼师求职自荐信
2013/10/01 职场文书
总经理驾驶员岗位职责
2013/12/04 职场文书
运动会邀请函范文
2014/01/31 职场文书
学术诚信承诺书
2014/05/26 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS