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);
随机推荐
- tomcat 7下spring 4.x mvc集成websocket以及sockjs完全参考指南(含nginx/https支持)
之所以sockjs会存在,说得不好听点,就是因为微软是个流氓,现在使用windows 7的系统仍然有近半,而windows 7默认自带的是ie 8,有些会自动更新到ie 9,但是大部分非IT用户其实都 ...
- 01: tornado基础篇
目录:Tornado其他篇 01: tornado基础篇 02: tornado进阶篇 03: 自定义异步非阻塞tornado框架 04: 打开tornado源码剖析处理过程 目录: 1.1 Torn ...
- 《网络攻防》实验八:Web基础
适逢多事之际,下周二的课设答辩.全国信安竞赛初赛作品筹备.协会密码沙龙比肩接踵,这些"案牍"不仅劳形还影响了我的复习计划."甘蔗没有两头甜的"还是要有所舍得了, ...
- 20165310 Java实验五《网络编程与安全》
20165310 Java实验五<网络编程与安全> 任务一 题目:①编写MyBC.java实现中缀表达式转后缀表达式的功能:②编写MyDC.java实现从上面功能中获取的表达式中实现后缀表 ...
- Delphi XE5 for Android (四)
在Delphi中窗体与窗体之间的交互与调用非常简单,在FMX中这个优势得到了充分体现,先建立一个主窗体和一个需要调用的窗体: 在主窗体上放的按钮事件如下: - private { Pr ...
- fastjson 简单使用 及其JSONObject使用
阿里巴巴FastJson是一个Json处理工具包,包括“序列化”和“反序列化”两部分,它具备如下特征:速度最快,测试表明,fastjson具有极快的性能,超越任其他的Java Json parser. ...
- HDU 3404 Switch lights(Nim积)题解
题意:在一个二维平面中,有n个灯亮着并告诉你坐标,每回合需要找到一个矩形,这个矩形xy坐标最大的那个角落的点必须是亮着的灯,然后我们把四个角落的灯状态反转,不能操作为败 思路:二维Nim积,看不懂啊, ...
- window 环境下jdbc访问启用kerberos的impala
最近,公司生产集群添加kerberos安全认证后,访问集群的任何组件都需要进行认证,这样问题来了,对于impala,未配置kerberos安全认证之前通过impala的jdbc驱动(impala-jd ...
- easyui ---- jEasyUI-定制提示信息面板组件
@{ ViewBag.Title = "Layouts"; Layout = "~/Views/Shared/Layouts.cshtml"; } <di ...
- EasyUI ---- draggable可拖动的用法
<link href="~/Scripts/easyui1.5/themes/default/easyui.css" rel="stylesheet" / ...