如何用jQuery实现点击按钮仅为其父元素添加指定类

你当前的代码会给所有.main元素添加类，原因是$(".main")选中了页面中所有匹配该类的元素。要实现点击按钮只给它的父元素加类，只需要修改事件处理函数中定位元素的逻辑：

修改后的JavaScript代码 #

// 无需手动each循环，jQuery会自动给所有.main-btn绑定事件
$(".main-btn").on("click", function() {
    // 获取当前点击按钮的父级.main元素并添加类
    $(this).parent(".main").addClass("addClass");
});

更通用的写法（适配复杂DOM结构） #

如果按钮和目标.main元素不是直接父子关系（比如中间嵌套了其他标签），用closest()方法会更稳妥，它会向上查找最近的匹配元素：

$(".main-btn").on("click", function() {
    $(this).closest(".main").addClass("addClass");
});

完整代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="main-btn">Button</div>
</div>

<div class="main">
  <div class="main-btn">Button</div>
</div>

CSS

.main {
  background: yellow;
  margin-bottom: 3px;
  height: 50px;
}

.main.addClass {
  background: green;
}

关键说明 #

• $(this)在事件处理函数中代表当前被点击的按钮元素
• parent()仅获取直接父元素，closest()会向上遍历DOM树找到最近的匹配祖先元素，根据你的DOM结构选择合适的方法
• jQuery的事件绑定无需手动用each()循环，直接通过选择器绑定即可作用于所有匹配元素

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