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 URL参数读取改进版
Jan 16 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
详解JavaScript匿名函数和闭包
Jul 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常用数组函数实例小结
2016/12/29 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
js获取内联样式的方法
2015/01/27 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
express如何使用session与cookie的方法
2018/01/30 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
简单了解OpenCV是个什么东西
2017/11/10 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
经典大学生求职信范文
2014/01/06 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
投资意向书范本
2014/04/01 职场文书
医药销售自荐书
2014/05/29 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python