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_08_函数对象
Oct 15 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
js瀑布流布局的实现
Jun 28 Javascript
微信小程序实现购物车功能
Nov 18 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 json_decode函数详细解析
2014/02/17 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
python3 对list中每个元素进行处理的方法
2018/06/29 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python多进程重复加载的解决方式
2019/12/13 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
python实现ftp文件传输功能
2020/03/20 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
实习自我鉴定
2013/12/15 职场文书
后勤人员岗位职责
2013/12/17 职场文书
办公室助理岗位职责
2013/12/25 职场文书
表彰先进的通报
2014/01/31 职场文书
中文专业自荐书
2014/06/29 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python