以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. SQL、SQL Server、MySQL与Oracle

    SQL (Structured Query Language),结构化查询语言,用来与多种数据库建立联系,根据ANSI(美国国家标准协会)的规定,SQL为RDBMS(关系型数据库)的标准语言. --- ...

  2. 20145206邹京儒 EXP7网络欺诈技术防范

    20145206邹京儒 EXP7网络欺诈技术防范 一.实践过程记录 URL攻击实验前准备 1.在终端中输入命令:netstat -tupln |grep 80,查看80端口是否被占用,如下图所示 2. ...

  3. Windows10 蓝屏 DRIVER_IRQL_NOT_LESS_OR_EQUAL (vfilter.sys)的可能解决方法

    早上我的笔记本从休眠中开机的时候突然出现了蓝屏,这个蓝屏在前几天出现过了.两次提示的终止代码都一样.我的笔记本型号是DELL XPS15 9560 我的笔记本配置: 类别 型号 内存 16GB DDR ...

  4. 【环境搭建】CDH版Hadoop环境搭建

    1.下载组件 首先去CDH网站上下载hadoop组件 地址:http://archive.cloudera.com/cdh5/cdh/5/ 注意版本号要与其他的组件CDH版本一致 2.环境配置 设置主 ...

  5. 3D CNN for Video Processing

    3D CNN for Video Processing Updated on 2018-08-06 19:53:57 本文主要是总结下当前流行的处理 Video 信息的深度神经网络的处理方法. 参考文 ...

  6. 返回json格式数据乱码

    本文为博主原创,未经允许不得转载: 原本返回json格式数据的代码: @ResponseBody @RequestMapping(value = "getListByTime", ...

  7. Java I/O学习 文件读写工具

    import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundException; import jav ...

  8. Linux——shell简单学习(一)

    首先来一个小程序,来查看所在目录,以及该目录下的文件 #!/bin/sh # “#!”指定用sh执行shell脚本 #this is to show workstation # “#” 表示注释 ec ...

  9. c++ 数组元素拷贝到容器(copy)

    #include <iostream> // cout #include <algorithm> // copy #include <vector> // vect ...

  10. Ubuntu16.04 安装 Django

    pip2 install django==1.11 或者手动安装: 链接:https://pan.baidu.com/s/1uQJD-pON7gELoCC2TwYnEw 提取码:flgg cd Dja ...