javascript下查找父节点的简单方法


Posted in Javascript onAugust 13, 2007

<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==p){return i;}
       if(n==document.documentElement){return -1;} //找不到目标父节点,防止死循环
   }
}

函数的返回值是索引数字,如果入口节点与查找的父节点相同(即同一个元素),返回值为0,向上循环找到父节点后返回向上查找的节点级数,如果向上查找,到了整个页面的根节点,比如是<html>,还找不到,就返回-1,并结束循环。

返回值与String对象内置的indexOf方法相似。函数的关键是for的第二个参数n=n.parentNode,感觉比较巧妙。

Javascript 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
根据地区不同显示时间的javascript代码
Aug 13 #Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 #Javascript
Track Image Loading效果代码分析
Aug 13 #Javascript
不错的JS中变量相关的细节分析
Aug 13 #Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 #Javascript
TopList标签和JavaScript结合两例
Aug 12 #Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php设计模式之单例模式使用示例
2014/01/20 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
Python内置函数locals和globals对比
2020/04/28 Python
python中如何写类
2020/06/29 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
软件配置管理有什么好处
2015/04/15 面试题
就业推荐自我鉴定
2013/10/06 职场文书
高中语文教学反思
2014/01/16 职场文书
大学新学期计划书
2014/04/28 职场文书
企业员工薪酬方案
2014/06/04 职场文书
听证通知书
2015/04/24 职场文书
公安机关起诉意见书
2015/05/20 职场文书
不同意离婚答辩状
2015/05/22 职场文书
校园广播稿范文
2015/08/19 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书