Question

我想通过jQuery将一个类添加到具有共享类的父div元素。我可以使用.closest添加添加到正确div.class的类，但它也将类添加到具有相同目标类的其余div。

所以我只想让课程添加到子按钮。

$('.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'）方法来获得最近的父类。

$('.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>

仅将类添加到最近的父类

2 个答案: