jQuery如何选中同级元素的子元素 仅移除同组active类不影响其他筛选器

问题根源 #

原代码中直接全局选择所有.active类移除，会命中页面内两个筛选器的激活元素，导致另一个筛选器的激活状态被误清除。

修复后的代码 #

$(document).ready(function () {
    $('.link').on('click', function() {
        // 仅清除当前点击项所属筛选器内的激活状态
        $(this).closest('ul').find('.active').removeClass('active');
        // 给当前点击项添加激活状态
        $(this).addClass('active');
    });
});

代码说明 #

• $(this).closest('ul')会向上查找DOM，定位到当前点击链接所属的筛选器容器（ul标签），不会命中另一个筛选器
• find('.active')仅在定位到的筛选器容器内部查找激活元素，实现不同筛选器的激活状态隔离
• 额外说明：原代码用的bind方法在jQuery 3.0之后已经被弃用，替换为官方推荐的on方法绑定事件，兼容性更好

如果后续新增更多筛选器，只要给所有筛选器根节点加统一类名（比如filter-container），把closest('ul')改成closest('.filter-container')就能通用，不需要每次修改选择器。

内容的提问来源于stack exchange，提问作者Hasan Kawaai Pikachu