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);
随机推荐
- 写给java程序员的c++与java实现的一些重要细微差别-附完整版pdf学习手册
0.其实常规的逻辑判断结构.工具类.文件读写.控制台读写这些的关系都不大,熟悉之后,这些都是灵活运用的问题. 学习c/c++需要预先知道的一个前提就是,虽然有ANSI C标准,但是每个c/c++编译器 ...
- 20145101《Java程序设计》第8周学习总结
20145101<Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rew ...
- python字符串格式化之format
用法: 它通过{}和:来代替传统%方式 1.使用位置参数 要点:从以下例子可以看出位置参数不受顺序约束,且可以为{},只要format里有相对应的参数值即可,参数索引从0开,传入位置参数列表可用*列表 ...
- 【分布式计算】30分钟概览Spark分布式计算引擎
本文主要帮助初学者快速了解Spark,不会面面俱到,但核心一定点到. Spark是继Hadoop之后的下一代分布式内存计算引擎,于2009年诞生于加州大学伯克利分校AMPLab实验室,现在主要由Dat ...
- kylin从入门到实战:实际案例
版权申明:转载请注明出处.文章来源:http://bigdataer.net/?p=308 排版乱?请移步原文获得更好的阅读体验 前面两篇文章已经介绍了kylin的相关概念以及cube的一些原理,这篇 ...
- HDU 6128 Inverse of sum(同余)
http://acm.hdu.edu.cn/showproblem.php?pid=6128 题意:有一个a数列,并且每个数都小于p,现在要求有多少对$(i,j)$满足$\frac{1}{a_i+a_ ...
- MUI --- h.js无效
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Linux——权限管理命令简单笔记
首先linux中的权限分为三种rwx 代表字符 权限 对文件的含义 对目录的含义 r 读权限 可以查看文件 内容 (cat, more, head, tail) 可以列出目录中 的内容 (ls) w ...
- Cocos2d-x学习笔记(八)精灵对象的创建
精灵类即是Sprite,它实际上就是一张二维图. 它首先直接继承了Node类,因此,它具有节点的特征,同时,它也直接继承了TextureProtocol类,因此,它也具有纹理的基本特征. 这里,有必要 ...
- Excel表格的导入导出
Excel文件的组成: 01.一个Excel文件由N个Sheet组成的 02.一个Sheet由N个Row组成 03.一个Row由N个Cell组成 需求: 把内存中的数据 写入到指定的excel表格中! ...