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);
随机推荐
- C++设计模式 之 “接口隔离” 模式:Facade、Proxy、Mediator、Adapter
“接口隔离”模式 在组建构建过程中,某些接口之间之间的依赖常常会带来很多问题.甚至根本无法实现.采用添加一层间接(稳定)接口,来隔离本来相互紧密关联的接口是一种常见的解决方案. 典型模式 #Facad ...
- lambda表达式Bug——修改捕获变量失败
解<C++ Primer 5th>的 9-50 练习题时,遇到了 lambda表达式值捕获和引用捕获之区别问题. 欲修改捕获的变量 sum,累加之.但当时忘记值捕获和引用捕获是有区别的.下 ...
- 20145220韩旭飞《网络对抗》实验五:MSF基础应用
20145220韩旭飞<网络对抗>实验五:MSF基础应用 主动攻击 首先,我们需要弄一个xp sp3 English系统的虚拟机,然后本次主动攻击就在我们kali和xp之间来完成. 然后我 ...
- 20145313张雪纯Exp8 Web基础
回答问题 (1)什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框. ...
- sql注入学习心得与sqlmap使用心得
做题是最好的老师 首先先来分享一下我用来练手的题目,实验吧中的简单的sql注入1,2,3 不得不说,sql注入真是一个神奇的东西,至少我以前看起来一点头绪都没有的题目能入手了 首先是简单的sql注入3 ...
- IOS项目中的细节处理,如更改状态栏等等
一,状态栏更改为白色 1 在info.plist中添加一个字段:view controller -base status bar 为NO 2 在需要改变状态栏颜色的ViewController中在Vi ...
- Python3基础 str format 输出花括号{}
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- redis.conf 配置 详解 中文 2.8
# redis version 2.8.19 # 1k => 1000 bytes# 1kb => 1024 bytes# 1m => 1000000 bytes# 1m ...
- AtCoder 杂题训练
前言: 因为要普及了,今年没一等就可以退役去学文化课了,所以暑假把历年noip普及组都刷了一遍,离noip还有50+天,想弄点强化训练什么的. 想了想,就这些天学文化课之余有空就把AtCoder之前那 ...
- 前端验证用户登陆状态(vue.js)
首先用户需要进行登陆(请求登陆接口),接口请求成功之后后台会返回对应的用户信息(可以把用户信息存放在浏览器缓存中),并且后台会设置浏览器的cookie值(可以在network->header-& ...