分享JavaScript 获取元素在父节点中的下标技巧
- 更新时间:2020-02-12 19:37:13
- 编辑:蒋晋鹏
jQuery中直接通过$(this).index()即可得到当前元素的下标。但原生JavaScript并没有提供类似的属性或方法,这时候可以调用数组中的indexOf方法直接计算
<ul> <li>hello</li> <li>hello</li> <li id="mts">hello</li> <li>hello</li> </ul> var elt=document.getElementById('mts'); var index=var index = [].indexOf.call(elt.parentNode.querySelectorAll(elt.tagName),elt); console.log(index);
这里是计算elt在其父节点下,相同标签的元素中的位置。首先通过var list=elt.parentNode.quertSelectorAll('li')获得同类标签的列表,这里如果直接执行list.indexOf(elt)的话会出错,提示list没有indexOf这个函数,这时候可以借用数组中的indexOf,通过call改变调用者对象:[].indexOf.call(list,elt)等价于list.indexOf(elt)
以上所述是小编给大家介绍的JavaScript 获取元素在父节点中的下标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
相关教程
-
JavaScript偏函数与柯里化实例详解
这篇文章主要介绍了JavaScript偏函数与柯里化,结合实例形式详细分析了JavaScript偏函数与柯里化的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
发布时间:2019-06-21
-
Kotlin 语言中调用 JavaScript 方法实例详解
这篇文章主要介绍了Kotlin 语言中调用 JavaScript 方法实例详解的相关资料,需要的朋友可以参考下
发布时间:2019-08-28
-
JavaScript语言精粹
JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好
大小:9.9 MBJavaScript电子书
-
完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程
完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线,开发物联网应用、手机App和操控微电脑
大小:60.8 MB物联网电子书
-
HTML5+CSS3+JavaScript从入门到精通
本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术
大小:186 MBweb开发电子书
-
同构JavaScript应用开发
大小:10.4 MBJavaScript电子书
-
JavaScript网页动画设计
JavaScript网页动画设计 由业界先进的动画库Velocity。js的作者所著,书中内容共分为8章,简明扼要地总结了在网页上使用动画的技术技巧,让读者掌握如何有效利用动画实现无与伦比的用户体验
大小:26 MBJavaScript电子书
-
你不知道的JavaScript(中卷)
JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。
大小:7.8 MBJS电子书
-
学习JavaScript数据结构与算法(第3版)
大小:13.6 MBJavaScript电子书
-
趣学JavaScript:教孩子学编程
大小:42.7 MBJavaScript电子书