以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. log4j.properties配置详解与实例

    log4j.properties配置详解与实例 第一步:加入log4j-1.x.x.jar到lib下. 第二步:在工程的src下下建立log4j.properties.内容如下: #OFF,syste ...

  2. Python3基础 file with 配合文件操作

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

  3. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

  4. 试着用React写项目-利用react-router解决跳转路由等问题(二)

    转载请注明出处:王亟亟的大牛之路 这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source- ...

  5. BZOJ2819: Nim 树链剖分

    Description 著名游戏设计师vfleaking,最近迷上了Nim.普通的Nim游戏为:两个人进行游戏,N堆石子,每回合可以取其中某一堆的任意多个,可以取完,但不可以不取.谁不能取谁输.这个游 ...

  6. BZOJ1398: Vijos1382寻找主人 Necklace 字符串最小表示法

    Description 给定两个项链的表示,判断他们是否可能是一条项链. Input 输入文件只有两行,每行一个由0至9组成的字符串,描述一个项链的表示(保证项链的长度是相等的). Output 如果 ...

  7. [luogu 3957]跳房子

    题目链接 50分做法 挺显然的一个做法,因为金币量是单调的(如果你花i枚金币可以得到最优解,i+1枚也一定可以),所以可以二分答案 然后对于二分出来的每个答案,都做一遍dp,效率$O(n^2logn) ...

  8. 初始 DQN 程序 所遇到的问题

    初始 DQN 程序 所遇到的问题 最近在看 DQN,但是想试试别人放出来的 code,但是发现,额,各种问题,在此记录,以备不时之需! 问题1. wangxiao@GTX980:~/Documents ...

  9. IDEA启动时自动报Plugin Error错误

    Plugin Error Problems found loading plugins: Plugin "JBoss Integration" was not loaded: re ...

  10. HDU 6127 Hard challenge(扫描线)

    http://acm.hdu.edu.cn/showproblem.php?pid=6127 题意: 有n个点,每个点有一个$(x,y)$坐标和一个权值,任意两点之间都有连线,并且连线的权值为两个顶点 ...