Tengo 2 div y tienen la misma clase "comida". Cuando presiono el botón Agregar en el segundo div, elige el primer título del primer div. Quiero que cada div de la misma clase elija a sus hijos.
let meal = document.querySelector(".meal"); let tit = meal.childNodes[3]; $(".btnAdd").on("click", function() { console.log(tit.innerText); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="meal"> <img src="" height="250" width="500" class="mealImg"> <h4 class="title">Title</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div> <div class="meal"> <img src="" height="250" width="500" class="mealImg"> <h4 class="title">Title</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div>Dado que ya está usando jQuery, ¿por qué no usarlo en todos los ámbitos y aprovechar el uso de siblings() ?
$('.btnAdd').on('click', function() { console.log($(this).siblings('.title').text()); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="meal"> <img src="" height="250" width = "500" class="mealImg"> <h4 class = "title">Title</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div> <div class="meal"> <img src="" height="250" width = "500" class="mealImg"> <h4 class = "title">Title 2</h4> <button class="btnAdd">Add</button> <i class="far fa-heart" id="favIcn"></i> </div>