Добавить класс только к ближайшему родительскому классу

Question

Я хочу добавить класс через jQuery в родительский элемент div с общим классом. Я могу использовать .closest, чтобы добавить класс, добавленный в правильный 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

Вы должны использовать .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>

Answer 2

Вы должны использовать $ (это) .closest (». MyClass') метод ближайшего родительского класса.

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