以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. 20145225唐振远《网络对抗》 Web安全基础实践

    20145225唐振远<网络对抗>Web安全基础实践 参考博客:20145215 卢肖明 基础问题回答 (1)SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web ...

  2. RAM,ROM,NAND Flash,NOR Flash(A)

    他们四者相互独立 RAM掉电易失数据: RAM又分两种,一种是静态RAM,SRAM:一种是动态RAM,DRAM.前者的存储速度要比后者快得多,我们现在使用的内存一般都是动态RAM. DDR是Doubl ...

  3. 什么是BFC?

    转载自知乎:https://zhuanlan.zhihu.com/p/25321647 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: ...

  4. UVa 10891 Game of Sum - 动态规划

    因为数的总和一定,所以用一个人得分越高,那么另一个人的得分越低. 用$dp[i][j]$表示从$[i, j]$开始游戏,先手能够取得的最高分. 转移通过枚举取的数的个数$k$来转移.因为你希望先手得分 ...

  5. BZOJ 3339 && luogu4137 Rmq Problem / mex(莫队)

    P4137 Rmq Problem / mex 题目描述 有一个长度为n的数组{a1,a2,-,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. 输入输出格式 输入格式: 第一行n,m. ...

  6. Unity3D学习笔记(二十二):ScrollView和事件接口

    昨天问题 InputField光标被遮挡问题:背景图片输入层级高于光标的层级,把光标弄成子物体,子物体层级高 自制的滑动框,选项怎么对齐,把Template的Pivot.y改为1 分辨率的区别:16: ...

  7. 【TCP/IP详解 卷一:协议】第十章 动态选路协议

    更为详细的RIP博客解析: RIP理论 距离向量算法的简介: RIP协议V-D算法的介绍 10.1 引言 静态选路修改路由表的三种方法 (1)主机设置时,默认的路由表项 (2)ICMP重定向报文(默认 ...

  8. 02_Flume1.6.0安装及单节点Agent实践

    Flume1.6.0的安装1.上传Flume-1.6.0-tar.gz到待部署的所有机器     以我的为例: /usr/local/src/ 2.解压得到flume文件夹      # tar -x ...

  9. # WinForm关闭窗体确认

    private void Lba_IE_Form_FormClosing(object sender, FormClosingEventArgs e) { if (MessageBox.Show(&q ...

  10. Jenkins 构建 coding项目,插件

    安装插件:http://updates.jenkins-ci.org/download/plugins/coding-webhook/