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 常用方法基础教程
Feb 06 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
JS实现标签页切换效果
May 04 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js 函数调用模式小结
2011/12/26 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
react路由配置方式详解
2017/08/07 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
深入了解Python 变量作用域
2020/07/24 Python
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
技术总监管理职责范本
2014/03/06 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
五年级作文之成长
2019/09/16 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电