以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. Salty Fish 结对学习心得体会及创意照 (20165211 20165208)

    小组结对学习心得体会及创意照 在阅读了软件工程讲义 3 两人合作(2) 要会做汉堡包和现代软件工程讲义 3 结对编程和两人合作后,加之对于这几周组队学习的感悟,我们对于组队学习的一些感悟和想法如下: ...

  2. 2019“嘉韦思”杯RSA256题目wp

    首先我们从网站下载了一个压缩包,解压出来一看里面有2个文件 首先我们先打开fllllllag康康,结果发现是一串乱码,这时候第一反应就是,文件被加密了,再看fllllllag下面的gy.key文件,更 ...

  3. 【转】linux之cp/scp命令+scp命令详解

    linux之cp/scp命令+scp命令详解   名称:cp 使用权限:所有使用者 使用方式: cp [options] source dest cp [options] source... dire ...

  4. Python3基础 print \n换行

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  5. 《js高级程序设计》--第三章数据类型

    一.关键字 二.保留字 三.数据类型 (数据类型具有动态性)   1.Undefined 声明变量却未对其加以初始化(赋值) 2.Null null值表示一个空对象指针,而这也正是使用typeof操作 ...

  6. VS中sln和suo的区别

    1.调试程序出现这个错误an error occurred while validating 解决方案:http://stackoverflow.com/questions/8648428/an-er ...

  7. BZOJ3298: [USACO 2011Open]cow checkers 威佐夫博弈

    Description 一天,Besssie准备和FJ挑战奶牛跳棋游戏.这个游戏上在一个M*N的棋盘上, 这个棋盘上在(x,y)(0<=x棋盘的左下角是(0,0)坐标,棋盘的右上角是坐标(M-1 ...

  8. 使用Android-studio开发移动app与weex结合开发详细步骤

    详细步骤如下:   首先,确保机器已经安装了node.js,并且把npm更新到最新版本 下载完毕后,我们可以看到全局目录下的node_modules下面多出一个weex-toolkit 同时,我们留意 ...

  9. Unity3D学习笔记(十三):委托、考试复习

    委托:比较什么时候用委托好   下课案例:不用下课铃 1.ClassManager需要拿到所有教室的引用,课堂管理者应该只负责计时并告知每间教室 2.每间教室应该是由当班老师负责是否需要下课,而课堂管 ...

  10. blast 数据库说明

    Peptide Sequence Databases蛋白序列的数据库 nrAll non-redundant GenBank CDS translations + RefSeq Proteins + ...