如何按类获取被点击元素的索引？
在前端开发中，可以通过以下方式按类获取被点击元素的索引：
- 首先，使用JavaScript获取所有具有相同类名的元素。可以使用
document.getElementsByClassName()方法，该方法返回一个包含所有具有指定类名的元素的集合。 - 然后，使用循环遍历这些元素，并为每个元素添加点击事件监听器。可以使用
addEventListener()方法来为元素添加事件监听器。 - 在点击事件的处理函数中，可以通过
event.target属性获取被点击的元素。该属性返回触发事件的元素。 - 接下来，可以使用
Array.from()方法将元素集合转换为数组，并使用indexOf()方法获取被点击元素在数组中的索引。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>按类获取被点击元素的索引</title>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<script>
// 获取所有具有类名为 "item" 的元素
var items = document.getElementsByClassName('item');
// 为每个元素添加点击事件监听器
Array.from(items).forEach(function(item, index) {
item.addEventListener('click', function(event) {
// 获取被点击元素在数组中的索引
var clickedIndex = Array.from(items).indexOf(event.target);
console.log('被点击元素的索引：', clickedIndex);
});
});
</script>
</body>
</html>在上述示例中，我们首先使用document.getElementsByClassName('item')获取所有具有类名为 "item" 的元素。然后，使用Array.from()将元素集合转换为数组，并使用forEach()方法为每个元素添加点击事件监听器。在点击事件的处理函数中，使用Array.from(items).indexOf(event.target)获取被点击元素在数组中的索引，并输出到控制台。
这种方法适用于需要按类获取被点击元素的索引的场景，例如实现一个导航菜单，点击菜单项时可以获取该菜单项在菜单中的位置。
相关·内容
1回答
我想要在它的list中以及它的.blue类中获得被单击元素的索引。 我知道如何在它的列表中获取索引，但是我不知道如何在它的.blue类中获取索引。
浏览 16提问于2021-01-20得票数 3
回答已采纳
如何像jQuery一样在Mootools中获取元素的索引。if (this.hasClass('h-inactiveslideshowcontrol')) { }如何获取被点击元素的索引
浏览 3提问于2011-11-14得票数 2
回答已采纳
2回答
我通过类名获取所有元素，并为每个元素创建一个侦听器，如下所示：for ( letaddEventListener('mouseover', function() {})
当鼠标事件被触发时，我如何获得<em
浏览 1提问于2019-10-11得票数 0
当用户单击容器中的任何项时，我在div容器中有3个span项，因为div(容器)是(项)跨度元素的parentNode。我想让(item)span元素的索引被点击。 “如何获取单击子节点的索引”
浏览 63提问于2019-09-29得票数 1
回答已采纳
2回答
我希望将事件侦听器附加到所有img-frame类，并获得父元素内的哪个元素(按索引)已被单击： $('.img-frame').each((i, img) => {</div>
浏览 16提问于2021-10-01得票数 0
1回答
我有一个基于标签的网站，其中标签是通过克隆默认的标签视图动态创建的，然而，在不知道每个元素的索引号的情况下，无法在每个标签上执行逻辑。URLerror.remove(); } });我想出的唯一解决方案是遍历所有的类，并赋予它们一个与它们的类号匹配的name，然后每当单击t
浏览 1提问于2021-02-11得票数 0
1回答
我的代码中有一个图像。当我点击它时，我想要它的样式被改变。该字段如下所示：我可以按类获取元素并单击它。但是我不知道如何改变风格。感谢您的帮助。
浏览 3提问于2014-04-14得票数 0
如果我编写一个简单的选择器，比如当它被点击时，我能计算出那个按钮的“索引”吗？即.button是第一次出现，还是第二次出现，还是第三次出现？我知道我可以用$('.button')[2]选择第三个按钮，但是我不知道如何获得那个2的值。
这些按钮分布在整个页面上，而不是都在同一个div中。
浏览 0提问于2017-03-02得票数 0
回答已采纳
我正在学习Xamarin，我想在我的CarouselView中获得被点击元素的索引 下面是Xaml代码： <ContentPage xmlns="http://xamarin.com/schemas/</DataTemplate> </CarouselView>
</St
浏览 36提问于2020-04-04得票数 1
回答已采纳
1回答
我正在学习作为数据结构的数组，我感兴趣的是在Java中，我们到底是如何通过索引来获取数组中的元素的。当执行以下代码时，在幕后发生了什么：int i = array[2];
JVM如何在数组中存储对原始类型的引用？我们如何获得O(1)中的元素？JVM是否计算该元素相对于其他元素的位置？
浏览 0提问于2017-06-07得票数 0
1回答
我有一些这样的HTML： <a href="#" class="test">Test</a><div class="other">现在，当我单击其中一个测试链接时，我希望获得父div的索引。但是，我希望索引只包含div.slide元素。我怎样
浏览 0提问于2013-09-26得票数 12
回答已采纳
1回答
我正在创建一个琐碎的游戏，其中你必须猜测一些国家的国旗的名称。我使用querySelectorAll来选择所有输入字段和所有按钮，您必须单击这些按钮才能实际执行猜测代码。我还创建了一个具有正确答案的名为"flags“的对象。我需要获取我按下的按钮的索引，以便将输入值与按钮的索引和标志对象的索引进行比较，因为它们具有相同的</em
浏览 8提问于2019-08-06得票数 0
回答已采纳
1回答
如何获取一个类的被点击按钮的索引。当我点击第一个"Editar“时，我希望索引为0。当我点击第二个"Editar“时，我想要索引1，依此类推。我试着使用：但是我找不到被点击的按钮的长度。
浏览 0提问于2021-12-02得票数 0
2回答
我有这样的代码：<button class="remove" value="2" />
<button class="remove如果用户单击了值为2的2，它必须警告1，但在我的代码中它会警告0。
浏览 1提问于2016-06-12得票数 0
回答已采纳
6回答
如何在下面的代码中获取被点击项目的索引？in collection of the clicked item ...在Firebug中，我看到了这个：jQuery151017197709735298827: 2 (我已经单击了第二个元素
浏览 0提问于2011-04-05得票数 69
我正在尝试从MouseEvent对象中获取被单击元素的索引。当我转到控制台单击事件对象的"path“属性并悬停到第一个数组项时，它会标记为实际单击的元素。 我想知道引擎怎么知道被点击的是哪一个？因为event.path选择器没有包含被点击元素的索引号。
浏览 113提问于2020-06-26得票数 2
回答已采纳
我使用的是jQuery手机，我在不同的页面中有一个类似的<li>类。#department">Department of Medical Sciences</a></li></div>
使用$('departments').text()，它将返回类departments的所有文本。如何获取我单击的
浏览 0提问于2014-07-22得票数 0
我想使用jquery获取被点击元素的索引--使用.index()应该很容易，但是我不想在$('div').index()这样的狭义选择器中使用索引。我想要的是该元素在页面/ DOM中的唯一索引-类似于$(everything).index() (如果存在的话)。下面是我的简单jquery单击函数：
$("div")
浏览 1提问于2012-10-02得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
