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 FormatNumber函数实现方法
Dec 30 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 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学习之 认清变量的作用范围
2010/01/26 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
基于php 随机数的深入理解
2013/06/05 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
jquery实现数字输入框
2017/02/22 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
python 制作网站小说下载器
2021/02/20 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
军训自我鉴定
2013/12/14 职场文书
结婚邀请函范文
2014/01/14 职场文书
求职简历中自我评价
2014/01/28 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
金融事务专业求职信
2014/04/25 职场文书
房地产开发项目建议书
2014/05/16 职场文书
日语专业求职信
2014/07/04 职场文书
六一儿童节开幕词
2015/01/29 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python
JavaScript前端面试组合函数
2022/06/21 Javascript