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异步加载浅析
Dec 28 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php生成短网址示例
2014/05/05 PHP
纯php生成随机密码
2015/10/30 PHP
php数据访问之增删改查操作
2016/05/09 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
关于毕业的中学校园广播稿
2014/01/26 职场文书
大学生社会实践评语
2014/04/25 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
公司应聘自荐书
2014/06/14 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL