Как добавить при клике класс одному из нескольких элементов jquery?

Question

[Clay]

При клике на packaging__name добавить класс active к packaging__modal-info, но не на всех блоках, а именно в том, в котором произошел клик

<div class="packaging__item">
                  <div class="packaging__item-inner">
                     <div class="agreement__inner">
                        <input type="checkbox" id="name1">
                        <label for="name1"></label>
                        <div class="packaging__name">Active</div>
                     </div>
                  </div>
                  <div class="packaging__modal-info">
                     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci laboriosam asperiores quos rerum quibusdam ducimus, ipsa perferendis voluptatibus dignissimos, nam consequatur et rem explicabo dolore eligendi corporis enim ullam. Eos, maxime ut sint laudantium iure minus soluta quisquam commodi est distinctio libero debitis magnam, suscipit maiores quae, architecto harum earum iste nesciunt perspiciatis! Labore recusandae laborum obcaecati, velit ullam est dolorum ad dolores repellendus exercitationem odio non unde nemo tempora eligendi cupiditate tenetur provident asperiores cum modi delectus architecto. Accusantium temporibus illum quibusdam, distinctio, nam quos cupiditate reprehenderit pariatur repellendus sapiente facere quidem eius libero numquam eligendi ad eveniet perspiciatis.
                  </div>
               </div>
               <div class="packaging__item">
                  <div class="packaging__item-inner">
                     <div class="agreement__inner">
                        <input type="checkbox" id="name1">
                        <label for="name1"></label>
                        <div class="packaging__name">Active</div>
                     </div>
                     
                  </div>
                  <div class="packaging__modal-info">
                     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci laboriosam asperiores quos rerum quibusdam ducimus, ipsa perferendis voluptatibus dignissimos, nam consequatur et rem explicabo dolore eligendi corporis enim ullam. Eos, maxime ut sint laudantium iure minus soluta quisquam commodi est distinctio libero debitis magnam, suscipit maiores quae, architecto harum earum iste nesciunt perspiciatis! Labore recusandae laborum obcaecati, velit ullam est dolorum ad dolores repellendus exercitationem odio non unde nemo tempora eligendi cupiditate tenetur provident asperiores cum modi delectus architecto. Accusantium temporibus illum quibusdam, distinctio, nam quos cupiditate reprehenderit pariatur repellendus sapiente facere quidem eius libero numquam eligendi ad eveniet perspiciatis.
                  </div>
               </div>

Comments

[Антон Литвиненко]

Используйте this и навигацию по дому вверх и вниз, parent и find

[Clay]

Антон Литвиненко, Ок, а можно немного конкретики? Или пример по данному вопросу?

[Антон Литвиненко]

Clay, тут одна строчка кода, с мобилки неудобно печатать.
Кнопка онклик, функция
$this.parents packaging__item find packaging__modal-info. Add class active
Только перепишите правильно в рамках jquery

[FrelFrloich]

обязательно jquery?

[Clay]

FrelFrloich, да

[FrelFrloich]

Clay, тогда хз.

Answer 1

[Сергей delphinpro]

$('.packaging__name').on('click', function(){
  $(this)
    .closest('.packaging__item')
    .find('.packaging__modal-info')
    .addClass('active');
});