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 相关文章推荐
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
jquery实现手风琴效果
Nov 20 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
JavaScript函数柯里化实现原理及过程
Dec 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分页思路以及在ZF中的使用
2012/05/30 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
Javascript MD4
2006/12/20 Javascript
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
VUE重点问题总结
2018/03/19 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Python切换pip安装源的方法详解
2016/11/18 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python验证码识别实例代码
2018/02/03 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python创建子类的方法分析
2019/11/28 Python
Python文件操作函数用法实例详解
2019/12/24 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
创先争优承诺书范文
2014/03/31 职场文书
新教师培训心得体会
2014/09/02 职场文书
队列队形口号
2015/12/25 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL