附加到最接近的div類（在頁面上具有相同類的多個div）

Question

我試圖將內容追加到名稱爲".infoCatcher"的最接近的div類中，但到現在爲止它正在追加到頁面上具有該類的所有div。

我該如何將它附加到最接近的div？

我有這樣的：

$(document).on('click', '.btnMoreInfo', function() { 
    $('.item').closest('div').find('.infoCatcher').append('<div class="moreInfo info">' + '</div>'); 
}); 

和HTML：

<ul> 
    <li> 
     <button class='btnMoreInfo'>More</button> 
     <div class='infoCatcher'></div> 
    </li> 
    <li> 
     <button class='btnMoreInfo'>More</button> 
     <div class='infoCatcher'></div> 
    </li> 
    <li> 
     <button class='btnMoreInfo'>More</button> 
     <div class='infoCatcher'></div> 
    </li> 
    <li> 
     <button class='btnMoreInfo'>More</button> 
     <div class='infoCatcher'></div> 
    </li> 
    <li> 
     <button class='btnMoreInfo'>More</button> 
     <div class='infoCatcher'></div> 
    </li> 
</ul> 

感謝幫助！

Answer 1

$(document).on('click', '.btnMoreInfo', function() { 
    $(this).closest('.infoCatcher').append('<div class="moreInfo info"></div>'); 
}); 

$（這）是指點擊btnMoreInfo

Answer 2

嘗試.siblings。將您的代碼轉換爲小提琴。 Working versionis here

$(document).ready(function(){ 
    $(document).on('click', '.btnMoreInfo', function (e) { 
     alert('Yes'); 
     $(e.target).siblings(".infoCatcher").append('<div class="moreInfo info">More Content..' + '</div>'); 
    }); 
});