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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
详解React-Todos入门例子
Nov 08 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
checkbox在vue中的用法小结
Nov 13 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
使用Mock.js生成前端测试数据
Dec 13 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
15种PHP Encoder的比较
2007/04/17 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php数组删除元素示例
2014/03/21 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
use jscript List Installed Software
2007/06/11 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
python动态网页批量爬取
2016/02/14 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python递归全排列实现方法
2018/08/18 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python生成器常见问题及解决方案
2020/03/21 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
感恩老师的演讲稿
2014/05/06 职场文书
养牛场项目建议书
2014/05/13 职场文书
研究生导师推荐信
2014/09/06 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers