js获取当前点击元素的索引
以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获取当前点击元素的索引的更多相关文章
- 【笔记】js获取当前点击元素的索引
以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...
- vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...
- 获取id 获取当前点击元素节点的任意 属性
<a id="haveproces" onclick="fnProces(event)" dataid="{{x.id}}" clas ...
- js 获取当前点击的标签
- 通过this获取当前点击选项相关数据
很多时候jquery只能或者应该回去一个集合.然后通过this获取触发时间的对象及相关属性 this.jq('#needsType').on("click", ".sel ...
- vue.js之获取当前点击对象(其实是套着vue的原生javascript吧,笑😊)
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴, ...
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- jq获取当前点击的li是ul中的第几个?
<script> var navulsize = $('.navul li').size(); var navulwidth = $('.navul li').wid ...
- jquery中获取当前点击对象
jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);
随机推荐
- Matchvs 使用记录
Matchvs Matchvs视频教程. https://doc.matchvs.com/VideoTutorials/videogs matchvs下载资源. http://www.matchvs. ...
- cmd解释
cmd是command的缩写.即命令提示符(CMD),是在OS / 2 , Windows CE与Windows NT平台为基础的操作系统(包括Windows 2000和XP中, Vista中,和Se ...
- luogu P2184 贪婪大陆
乍一不咋会 ╭(╯3╰)╮ 把地雷L到R看成一条线段 要求的就是区间内有多少条线段经过 很明显是要用[1,R]内的起点个数-[1,L-1]的终点个数 然后这起点和终点个数可以用简单的差分线段树来维护一 ...
- POJ 1260 Pearls (斜率DP)题解
思路: 直接DP也能做,这里用斜率DP. dp[i] = min{ dp[j] + ( sum[i] - sum[j] + 10 )*pr[i]} ; k<j<i => dp[j ...
- POJ1251 Jungle Roads (最小生成树&Kruskal&Prim)题解
题意: 输入n,然后接下来有n-1行表示边的加边的权值情况.如A 2 B 12 I 25 表示A有两个邻点,B和I,A-B权值是12,A-I权值是25.求连接这棵树的最小权值. 思路: 一开始是在做莫 ...
- redhat7 防火墙设置
查看防火墙的状态# firewall-cmd --staterunning # systemctl stop firewalld //关闭防火墙服务# systemctl start firewa ...
- Elasticsearch-->Get Started-->Exploring Your Cluster
Version 直接对localhost:9200发出一个get请求 { "name": "WqeJVip", "cluster_name" ...
- java web项目启动进入首页的配置方式(包含过滤跳转首页实现)
本文为博主原创,未经允许不得转载: 项目启动成功,进入首页的方式,我们往往在web.xml 中通过以下的方式默认进入跳转首页, <welcome-file-list> <welcom ...
- 纯CSS实现一个微信logo,需要几个标签?
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...
- hihocoder 九十八周 搜索一 24点
题目1 : 搜索一·24点 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 周末,小Hi和小Ho都在家待着. 在收拾完房间时,小Ho偶然发现了一副扑克,于是两人考虑用这副 ...