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实现时间格式输出FormatDate函数
Jan 13 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
js微信支付实现代码
Dec 22 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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制作简单的内容采集器的代码
2007/11/28 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python接口自动化框架实战
2020/12/23 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
跟单文员岗位职责
2014/01/03 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书