jQuery点击clickable元素时遍历同类跳过被点击元素的实现方法

你可以通过以下两种方式实现需求：

方式1：修改现有遍历逻辑 #

点击事件外层的this指向当前被点击的元素，你只需要在遍历过程中对比元素，跳过匹配项即可：

$('.clickable').on('click', function (e) {
    // 存储当前被点击的元素对象
    const clickedEl = $(this);
    $('.clickable').each(function () {
        // 仅当遍历到的元素不是被点击元素时，才添加新类
        if (!$(this).is(clickedEl)) {
            $(this).addClass('new-class');
        }
    });
})

方式2：更简洁的原生jQuery方案（无需手动遍历） #

直接使用jQuery内置的not()方法排除指定元素，代码更精简执行效率也更高：

$('.clickable').on('click', function (e) {
    // 选中所有clickable类元素，排除当前点击项后批量加类
    $('.clickable').not(this).addClass('new-class');
})

可选补充：如果你需要每次点击时先重置所有元素的new-class状态，再按规则添加，可以新增一行移除类的逻辑：

$('.clickable').on('click', function (e) {
    // 先清空所有元素的new-class
    $('.clickable').removeClass('new-class');
    // 再给除点击项外的元素加类
    $('.clickable').not(this).addClass('new-class');
})

内容的提问来源于stack exchange，提问作者Semion Vinogradov