Как выбрать конкретный элемент из нескольких динамически созданных с одинаковым классом jQuery?

Question

Есть 2-3 идентичных блока с кнопками в них. Эти блоки созданы динамически. Каждый блок разделен еще на два блока: блок с кнопками и блок с которым эти кнопки взаимодействуют. Как именно наладить это взаимодействие?

Пока у меня получается так, что при клике на кнопку на одном блоке, происходят действия на всех сразу.

.turn_task - кнопка .task_text - блок, с которым она должна взаимодействовать

function turnTask(turn) {
        turn.slideToggle('slow');
    }

    $('body').on('click', '.turn_task', function() {
        let turn = $('.task_text');

        turnTask(turn);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="task_item">
         

<div class="name_block"> 
                <div class="task_name">${name}</div>
                <button class="turn_task"></button>
                <button class="close_task"></button>
            </div> 
            <div class="task_text">${text}</div>
        </div>

Answer 1

При нажатии на кнопку, нужно найти parent-блок в котором она находится, а уже в нем искать text-блок:

$('body').on('click', '.turn_task', function() {
  let holder = $(this).closest('.task_item');
  let turn = $('.task_text', holder);
  turnTask(turn);
}

БЛОГ НА HUSL

Как выбрать конкретный элемент из нескольких динамически созданных с одинаковым классом jQuery?

Ответы (1 шт):