如何使用jQuery仅为对应div切换类？（多wrapper场景）

没问题，这其实是前端开发里很常见的精准DOM操作需求——要确保点击按钮时，只影响它所在的那个.wrapper容器里的.box2，而不是页面上所有的.box2元素。下面给你两种实用的实现方案：

原生JavaScript方案 #

这是最通用的方法，不需要依赖任何库：

// 等页面DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有.button2按钮
  document.querySelectorAll('.button2').forEach(button => {
    button.addEventListener('click', function() {
      // 第一步：找到当前按钮所在的最近的.wrapper父容器
      const currentWrapper = this.closest('.wrapper');
      // 第二步：在这个容器里找到对应的.box2元素
      const targetBox = currentWrapper.querySelector('.box2');
      // 第三步：切换目标元素的类名（这里假设要切换的类是'active'，你可以换成自己需要的类名）
      targetBox.classList.toggle('active');
    });
  });
});

关键逻辑解释 #

• closest('.wrapper')：从当前按钮元素开始，向上遍历DOM树，找到第一个匹配.wrapper的父元素，这一步是精准定位的核心，确保我们只在当前按钮所在的容器内操作。
• querySelector('.box2')：在找到的.wrapper容器内部查找.box2，避免影响其他容器里的同名元素。
• classList.toggle()：自动切换类名——如果元素有这个类就移除，没有就添加，完美实现“切换”需求。

jQuery方案（如果你项目里用了jQuery） #

如果你的项目已经引入了jQuery，代码会更简洁：

$(document).ready(function() {
  $('.button2').on('click', function() {
    // 链式调用：找到当前按钮的.wrapper父容器，再在里面找.box2，最后切换类名
    $(this).closest('.wrapper').find('.box2').toggleClass('active');
  });
});

这个逻辑和原生JS完全一致，只是用jQuery的链式语法简化了代码。

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