JavaScript 获取元素在父节点中的下标(推荐)
更新时间：2017年06月28日 08:33:47 作者：景影随形
jQuery中直接通过$(this).index()即可得到当前元素的下标。下面通过实例给大家介绍JavaScript 获取元素在父节点中的下标，需要的朋友参考下吧
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 获取元素在父节点中的下标，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下2016-04-04![一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]](//img.jbzj.com/images/xgimg/bcimg1.png)
一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]
本文主要介绍了非常好用的文字滚动的案例，鼠标悬浮可暂停的两种实现方案，代码简洁，可收藏备用。需要的朋友来看下吧2016-12-12
今天开发的时候,遇到要点击缩略图之后显示图片的大图查看,所以本文给大家分享下,这篇文章主要给大家介绍了关于js点击图片实现查看大图的简单方法,需要的朋友可以参考下2023-06-06
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
下面小编就为大家带来一篇js的form表单提交url传参数(包含+等特殊字符)的两种解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
本文为大家介绍下Javascript中如何得到中英文混合字符串的长度，下面有个不错的教程，感兴趣的朋友可以参考下2014-01-01
这篇文章主要介绍了微信用户访问小程序的登录过程详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。 可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果2022-10-10
这篇文章主要给大家介绍了关于用JavaScript做一个简易计算器的三种方法,JS中实现一个简单的计算器并不困难,我们只需利用基本的数学运算符和JavaScript的语法即可,需要的朋友可以参考下2023-10-10
大家在用Laravel框架期间可能会遇到了不少问题，现在我将自己遇到的一些问题总结出来，有一些调试起来着实不太容易，本文筛选出几个，希望这篇文章能让大家在PHP开发中少走一些弯路。2016-08-08
快捷留言功能，就是您现在看到在右侧浮动的那个小玩意，通过它可以直接提交留言并推荐，您想在博客里加上这个功能吗？2010-04-04
![一个非常好用的文字滚动的案例，鼠标悬浮可暂停[两种方案任选]](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论