页面有多个相同的class,我点击某个class,判断在相同的class中的第几个
时间: 2024-02-21 18:02:11 浏览: 98
JavaScript跨浏览器获取页面中相同class节点的方法
如果您想在一个包含多个相同 class 的元素列表中,找到某个特定的元素,并确定它在该列表中的索引,可以使用以下方法:
1. 找到所有包含该 class 的元素,可以使用 `$('.your-class-name')` 来实现,返回的是一个 jQuery 对象。
2. 遍历这个 jQuery 对象,判断每个元素是否是需要的元素,可以使用 `hasClass()` 方法来判断元素是否包含该 class。
3. 当找到需要的元素时,获取该元素在 jQuery 对象中的索引,即为当前页面第几个该 class 的元素。
以下是 jQuery 代码示例:
```javascript
var elements = $('.your-class-name');
var index = -1;
var count = 0; // 记录当前是第几个需要的元素
var targetIndex = 2; // 假设需要找到第 3 个需要的元素
elements.each(function(i, element) {
if ($(element).hasClass('your-class-name')) {
if (count == targetIndex) { // 找到需要的元素
index = i;
return false; // 跳出循环
}
count++;
}
});
if (index != -1) {
console.log('The index of the element is ' + index);
} else {
console.log('The element is not found');
}
```
其中 `$('.your-class-name')` 是需要查找的 class 名称,`targetIndex` 是需要找到的第几个需要的元素。在遍历元素列表时,使用一个计数器 `count` 记录当前是第几个需要的元素,当 `count` 等于 `targetIndex` 时,找到了需要的元素,获取该元素在列表中的索引并跳出循环。
阅读全文