如何在jQuery中仅修改指定卡片内.change类的CSS样式

首先要注意一个关键问题：如果存在多个卡片，绝对不能给多个元素使用同一个ID（updateData），这违反HTML规范，会导致选择器仅匹配页面中第一个带该ID的元素。先把ID改为class：

修改后的HTML #

<div class="card">
 <div class="card-body">
  <p class="change">Change one</p>
  <p class="change">Change two</p>
  <p class="change">Change three</p>
 </div>
 <div class="card-footer">
   <i class="updateData">change</i>
 </div>
</div>

方案一：用jQuery的closest()和find()方法（推荐） #

closest('.card')可以直接定位到当前点击元素最近的父级.card容器，比多次调用parentElement更灵活可靠，即便后续DOM结构微调也不会失效。再通过find('.change')仅查找该容器内的目标元素：

jQuery($ => {
  $('.updateData').click(e => {
    // 找到当前点击元素所属的card容器
    const $card = $(e.target).closest('.card');
    // 只修改这个card里的.change元素
    $card.find('.change').css('display','none');
  });
});

方案二：原生DOM元素结合jQuery选择器 #

如果想保留原生的element变量，也可以把它作为上下文参数传给jQuery选择器，限定查找范围：

jQuery($ => {
  $('.updateData').click(e => {
    const element = e.target.parentElement.parentElement;
    // 第二个参数指定仅在当前card元素内查找.change
    $('.change', element).css('display','none');
  });
});

两种方案都能实现仅隐藏当前卡片内的.change元素，优先推荐第一种，因为closest()的鲁棒性更强，适配后续DOM结构调整的能力更好。

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