如何实现jQuery动作仅作用于按钮所在的当前容器？

当前代码中，点击任意.section内的按钮时，会选中所有带有.section类的div并修改背景色，导致所有区块都变黄。要实现仅修改按钮所在的目标div，只需调整事件内的元素选择逻辑：

修改后的完整代码 #

<script>
$(document).ready(function(){
    $(".section button").click(function(){
        // 定位到当前按钮所在的.section父元素
        $(this).closest(".section").css("background-color","yellow");
    });
});
</script>

<div class="section">
   <h3>Web Development</h3>
   <p>Description of web development services.</p>
   <button>Click Me</button>
</div>
    
<div class="section">
   <h3>Graphic Design</h3>
   <p>Description of graphic design services.</p>
   <button>Click Me</button>
</div>

关键逻辑说明 #

• $(this)：在点击事件的回调函数里，指向当前被点击的按钮元素，通过它可以精准定位触发事件的源头。
• .closest(".section")：从当前按钮元素开始，向上遍历DOM树，找到最近的带有.section类的父元素。相比直接用.parent()，这个方法更灵活，即使按钮被其他嵌套元素包裹，依然能正确找到目标div。

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