以ul下的li元素为例;获取li的索引,代码如下:

 <ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

方法1:

把每个li元素加上index属性,每个li被点击时获取index属性即可

var ul =  document.getElementById("list");
var list = ul.querySelectorAll('li');
for (var i = ; i < list.length; i++) {
list[i].index = i;
}
ul.addEventListener('click',function(e){
console.log(e.target.index);
})

方法2:

获取ul下的所有li,找到被点击li在所有li中的位置

ul.addEventListener('click',function(e){
var item = e.target;
var lists = Array.from(ul.querySelectorAll('li'));
console.log(lists.indexOf(item));
})

js获取当前点击元素的索引的更多相关文章

  1. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  2. vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字

    点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...

  3. 获取id 获取当前点击元素节点的任意 属性

    <a id="haveproces" onclick="fnProces(event)" dataid="{{x.id}}" clas ...

  4. js 获取当前点击的标签

  5. 通过this获取当前点击选项相关数据

    很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...

  6. vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑😊)

    转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...

  7. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  8. jq获取当前点击的li是ul中的第几个?

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  9. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

随机推荐

  1. Sybase 删除表的某列

    Sybase 删除表的某列 Sybase 删除表的某列sql: --想删除字段temp1(该字段的所有值已置为null) alter table nh_bill_detail drop temp1;

  2. VM三种网络连接方式

    bridge:这种方式最简单,直接将虚拟网卡桥接到一个物理网卡上面,和Linux下一个网卡 绑定两个不同地址类似,实际上是将网卡设置为混杂模式,从而达到侦听多个IP的能力. 在此种模式下,虚拟机内部的 ...

  3. 03: Memcached

    目录: 1.1 Memcached简介与安装 1.2 python-memcached模块天生支持集群 1.3 Memcached基本操作 1.1 Memcached简介与安装返回顶部 1.Memca ...

  4. 20145104张家明 《Java程序设计》第7周学习总结

    20145104张家明 <Java程序设计>第7周学习总结 教材学习内容总结 第13章 简单认识时间和日期 -时间的度量:GMT.UT.TAI.UTC.Unix.epoch. -UTC:保 ...

  5. 20145317 网络对抗技术 逆向与Bof基础

    20145317 网络对抗技术 逆向与Bof基础 实践要求 1. 掌握NOP,JNE,JE,JMP,CMP汇编指令的机器码 2. 掌握反汇编与十六进制编程器 3. 能正确修改机器指令改变程序执行流程 ...

  6. windows10下使用source insight出现"source insight program editor已停止工作"的问题

    一.背景 1.1 OS 版本 windows 10 1.2 source insight版本 source insight 3.50.0034 二.解决方案 删除"我的文档"下面的source ins ...

  7. C++快速输入输出优化

    在这里存一下我的快速输入输出优化 以及写题模板 这里的是$getchar$优化和$putchar$优化,$fread$和$fwrite$暂时咕咕咕 快速输入 这里$define$了一个$I\_int$ ...

  8. 最常用的15大Eclipse开发快捷键技巧【转】

    引言 做java开发的,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧,可以在平常开发中节约出很多时间提高工作效率,下面我就结合自己开发中的使用和大家 ...

  9. java命令行执行程序解决依赖外部jar包的问题

    用java命令行直接执行程序,如果这个程序需要引用外部jar包.就不能单纯用java xx来执行 如果你的jar包和程序就在一个目录: 编译 javac -cp D:\yy\yy.jar,D\xx\x ...

  10. java ShutdownHook介绍与使用

    Java程序经常也会遇到进程挂掉的情况,一些状态没有正确的保存下来,这时候就需要在JVM关掉的时候执行一些清理现场的代码.JAVA中的ShutdownHook提供了比较好的方案. JDK提供了Java ...