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 IFrame 强制刷新代码
Jul 23 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
使用js画图之画切线
Jan 12 Javascript
javascript实现表单验证
Jan 29 Javascript
JS之相等操作符详解
Sep 13 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue解决跨域问题(推荐)
Nov 10 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 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Django添加feeds功能的示例
2018/08/07 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
销售代表求职自荐信
2013/10/01 职场文书
美术专业个人自我评价
2014/01/18 职场文书
乔迁宴答谢词
2014/01/21 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
python实现三次密码验证的示例
2021/04/29 Python