js查找父节点的简单方法
发布时间:2023-09-11 01:12:42
<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,感觉比较巧妙。
猜你喜欢
- 在项目里碰到需要把类似'450000'的数字转换为会计记账所用的格式,'450,000.00',分隔千分位和
- 加密解密字符串的asp函数,如用于ASP链接地址栏参数的加密,看代码就明白。比如:show.asp?id=DB26538FA54C70E1E
- 导语还记得那些年,我们玩过的Windows小游戏吗?说起Windows自带的游戏,相信许多80、90后的朋友都不陌生。在很早的那个游戏贫瘠的
- 顽固的Select下拉列表,一般很难用css来控制样式下面使用了js来美化select<!DOCTYPE html PUBLIC &q
- Fucklt.py 使用了最先进的技术能够使你的代码不管里面有什么样的错误,你只管 FuckIt,程序就能"正常"执行,
- 文章背景:某天,我的一个同事给我看了CSDN上面的一篇关于编程语言排行榜的文章,里面我看到VB还是排名很不错的,我就说,asp(vbscri
- 以前在工作中遇到一个问题,当表单发送的数据量很大时,就会报错。查阅MSDN了解到,原因是微软对用Request.Form()可接收的最大数据
- 本文实例讲述了Python在字典中将键映射到多个值上的方法。分享给大家供大家参考,具体如下:问题:一个能将键(key)映射到多个值的字典(即
- 前言本文介绍的主要内容是 Redux-Toolkit 在 React + TypeScript 大型应用中的实践,主要解决的问题是使用 cr
- 一段非常简单代码普通调用方式def console1(a, b): print("进入函数")
- 最近一直在“深山老林”中修炼“支付宝新版收银台”,经历了白板设计,视觉设计,前端开发,前后端联调各个阶段。点点滴滴……重点谈谈对交互设计的感
- 有时在处理不规则数据时需要提取文本包含的时间日期。dateutil.parser模块可以统一日期字符串格式。datefinder模块可以在字
- 现代浏览器可以基于RFC 2397标准使用base64把图片进行编码,然后输出类似data:image/png;base64,iVBORw0
- 一、增强的可扩展性 Oracle9i Real Application Clusters是Oracle的下一代并行服务器系列产品。Oracl
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- 1.建立Recordset对象Dim objMyRstSet objMyRst=Server.CreateObject(&ldquo
- 近来有客户要求用table显示一大串数据,由于滚动后就看不到表头,很不方便,所以想到这个效果。上次做table排序对table有了一些了解,
- 1.样式的重用性CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用,以减少不断定义样式属性
- adodb.stream对象的方法/属性cancel 方法使用方法如下object.cancel说明:取消执行挂起的异步 execute 或
- 在我转到wordpress之后第一个考虑的是它的数据库备份恢复问题,因为写bloger都知道,自己的blog记录的都是自己需要的宝贵的资料和