循环遍历一组元素 jQuery

Loop through a set of elements jQuery

本文关键字：一组 元素 jQuery 遍历 循环      更新时间：2023-09-26

我正在尝试循环遍历 12 个类，命名为 .video-link0 到 video-link11 个类，每个类都得到处理：

$('.video-link[n]').click(function() {
    $('.video-link[n]').addClass('show');
});

本质上，我想要以下行为：

单击.video-link1时，addClass('show') video-link1

单击.video-link2时，addClass('show') video-link2

依此类推，好像我有 12 个看起来像这样的函数：

$('.video-link1').click(function() {
    $('.video-link1').addClass('show');
});
$('.video-link2').click(function() {
    $('.video-link2').addClass('show');
});
... and so on

我想编写一个循环，以取代将其写成 12 个单独案例的需要。

以下内容不会产生我正在寻找的结果：

var elems = 12;
for(var i = 0; i < elems; i++){
    $('.video-link' + i).click(function() {
        $('.video-link' + i).addClass('show');
    });
};
**

更新 **

这不是一个重复的问题，否则上面提到的问题不能满足我的要求。我不想用next在 DOM 上上下移动.相反，我想编写一个循环，使用 i 遍历编号为 0-11 的 12 个类来枚举案例。

**

更新 **

这对我有用，并且使用了劳埃德班克斯的建议（我需要i枚举器加上this关键字）：

for (var i = 0; i < 12; i++) {
    $('.video-link'+i).click(function() {
      $(this).addClass('show');
    });
  }

您可以使用 start with ^= 选择器，并引用每个选择器$(this) 

$("[class^='video-link']").click(function() {
    $(this).addClass('show');
});

>您可以使用$(this)在事件回调中引用当前（目标）元素：

$('.video-link').click(function() {
    $(this).addClass('show');
});
您可以使用 

function(numberOfElements){
    for(var i = 1; i <= numberOfElements; i++){
        $('.video-link' + i).on('click', function(){
            $(this).addClass('show');
        });
    }
}

还应使用 .on 绑定事件而不是 .click 。 如果在初始页面加载后生成元素并使用 .click ，则不会注册事件处理程序。

相关文章：