JavaScript 获取元素在父节点中的下标(推荐)


Posted in Javascript onJune 28, 2017

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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
javascript表格的渲染组件
Jul 03 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
Vue.use源码分析
Apr 22 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 #Javascript
js+html制作简单日历的方法
Jun 27 #Javascript
ionic环境配置及问题详解
Jun 27 #Javascript
微信小程序 密码输入(源码下载)
Jun 27 #Javascript
Javascript实现base64的加密解密方法示例
Jun 27 #Javascript
微信小程序 空白页重定向解决办法
Jun 27 #Javascript
ionic 自定义弹框效果
Jun 27 #Javascript
You might like
php 中文处理函数集合
2008/08/27 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JavaScript中Function详解
2015/02/27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python浪漫表白源码
2019/04/05 Python
Python post请求实现代码实例
2020/02/28 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
洗发水广告词
2014/03/13 职场文书
运动会开幕式主持词
2014/03/28 职场文书
欢迎领导标语
2014/06/27 职场文书
原告代理词范文
2015/05/25 职场文书
荒岛余生观后感
2015/06/09 职场文书
Pandas自定义选项option设置
2021/07/25 Python