仅将 class 添加到最近的父级 class

Question

我想通过 jQuery 添加 class 到具有共享 class 的父 div 元素。我可以使用 .closest 将 class 添加到正确的 div.class 但它还会将 class 添加到具有相同目标 [=26] 的其余 div =].

所以我只想将 class 添加到子按钮。

$('.trigger').on('click', function() {
  $('.myclass').addClass('current');
});

.current {
  margin: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
  <div style="background-color:red;">
    <div style="padding:10px">
      <button class="trigger">
        Button
      </button>
    </div>
  </div>
</div>

<div class="myclass">
  <div style="background-color:blue;">
    <div style="padding:10px">
      <button class="trigger">
        Button
      </button>
    </div>
  </div>
</div>

Answer 1

您必须对最近的父级使用 $(this).closest('.myclass') 方法 class.

$('.trigger').on('click', function(){
     $(this).closest('.myclass').addClass('current');
});

Answer 2

您需要使用 .closest() 来选择父元素有 .myclass。

$(".trigger").on("click", function() {
    $(this).closest(".myclass").addClass("current");
});

.current { margin: 30px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
  <div style="background-color:red;">
    <div style="padding:10px">
      <button class="trigger">Button</button>
    </div>
  </div>
</div>
<div class="myclass">
  <div style="background-color:blue;">
    <div style="padding:10px">
      <button class="trigger">Button</button>
    </div>
  </div>
</div>

仅将 class 添加到最近的父级 class

Add a class to the closest parent class only

html

javascript

jquery

parent