我希望同一类的每个div都能选择自己的孩子

Question

我有两个div，它们有相同的类"饭"；。当我按下第二个div中的add按钮时，它会选择第一个div的第一个标题我希望同一类的每个div选择他们的孩子

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>

Answer 1

既然您已经在使用jQuery，为什么不全面使用它并利用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>