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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php使用codebase生成随机数
2014/03/25 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python编程中的反模式实例分析
2014/12/08 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python从入门到精通(DAY 1)
2015/12/20 Python
python求质数的3种方法
2018/09/28 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
简单了解python变量的作用域
2019/07/30 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
PHP开发的一般流程
2013/08/13 面试题
一份软件工程师的面试试题
2016/02/01 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
毕业自我评价
2014/02/05 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
预备党员公开承诺书
2014/05/28 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书