当前位置:主页 > javascript教程 > JavaScript 获取元素在父节点中的下标(推荐)

分享JavaScript 获取元素在父节点中的下标技巧

发布:2020-02-12 19:37:13 187


为找教程的网友们整理了javascript相关的编程文章,网友苏乐咏根据主题投稿了本篇教程内容,涉及到javascript、父节点、JavaScript 获取元素在父节点中的下标(推荐)相关内容,已被857网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

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 获取元素在父节点中的下标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!


参考资料

相关文章

  • JavaScript实现计数器基础方法

    JavaScript实现计数器基础方法

    发布:2022-06-17

    给大家整理了关于JavaScript的教程,这篇文章主要为大家详细介绍了JavaScript实现计数器的基础方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • JavaScript基本语法简单总结

    发布:2020-01-21

    这篇文章主要介绍了JavaScript基本语法,适合刚入门的同学,有兴趣的可以了解下。


  • Chrome DevTools直接调试Node.js和JavaScript的实例方法

    发布:2019-09-14

    现在我们可以用浏览器调试node.js了!!!下面这篇文章主要介绍了利用Chrome DevTools直接调试Node.js和JavaScript的方法步骤,文中介绍的很详细,需要的朋友可以参考学习,下面来一起看看吧。


  • 在JS中getUTCMilliseconds()实例方法

    发布:2019-11-28

    这篇文章主要介绍了在JavaScript中操作时间之getUTCMilliseconds()方法的使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下


  • JavaScript按概率随机生成代码整理

    发布:2020-02-09

    本篇文章主要介绍了详解JavaScript按概率随机生成事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • jQuery UI库中dialog对话框功能使用全解析

    发布:2022-06-23

    给网友朋友们带来一篇关于jQuery的教程,这篇文章主要介绍了jQuery UI库中dialog对话框功能使用全解析,文中列举了各种常用的dialog属性,整理得很全面,需要的朋友可以参考下


  • 微信小程序调用指纹验证

    发布:2020-03-14

    这篇文章主要介绍了小程序指纹验证的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 实现JavaScript的组成:BOM和DOM详解

    发布:2021-05-30

    下面小编就为大家带来一篇实现JavaScript的组成----BOM和DOM详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧


网友讨论