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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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
重置版宣传动画
2020/04/09 魔兽争霸
coreseek 搜索英文的问题详解
2013/06/08 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
python使用xmlrpclib模块实现对百度google的ping功能
2015/06/02 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
中文教师求职信
2014/02/22 职场文书
平安建设实施方案
2014/03/19 职场文书
支部鉴定材料
2014/06/02 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
父亲节寄语大全
2015/02/27 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书