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中的onerror事件概述及使用
Apr 01 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
JavaScript实现简单随机点名器
Nov 21 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
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python 深入理解yield
2008/09/06 Python
Python中Collection的使用小技巧
2014/08/18 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
西部世纪.net笔试题面试题
2014/04/03 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
党员自我评价分享
2013/12/13 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
男方婚礼答谢词
2015/01/20 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电