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 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
JS 实现分页打印功能
May 16 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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 过滤危险html代码
2009/06/29 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
详解php中反射的应用
2016/03/15 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python装饰器知识点补充
2018/05/28 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python中while和for的区别总结
2019/06/28 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
《长征》教学反思
2014/04/27 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
技术股份合作协议书
2014/10/05 职场文书
入党积极分子考察意见
2015/06/02 职场文书