查找並訪問特定的DIV，以便我可以追加內容

Question

我試圖找到並訪問一個按鈕的點擊div，但我無法找到基於我點擊的按鈕的DIV。

我知道我必須使用父母或兄弟姐妹這樣的東西...但我有點失落在這一個，並會感謝任何幫助。

這是HTML結構

<div class="box" id="upcoming"> 
     <div class="box-head"> 
      <header><h4>Test Header</h4></header> 
     </div> 
     <div class="box-body"> 
      <div class="widget-upcoming"> 
       <div class="test"> 
        Hello 
       </div>        
      </div> 
     </div> 
     <div class="box-footer"><button type="button" class="btn load-more">LOAD MORE</button> 
     </div> 
    </div> 

而jQuery的我至今是：

$(".load-more").on('click', function() { 
     alert($(this).parent().html()); 
    }); 

這是展示箱頁腳的內容。我沒有弄清楚如何到達Widget即將到來的DIV，這就是我將在其中將其他DIV與最新的DIV附加在一起的地方。

謝謝！

Answer 1

一個可能的解決方案：

$(".load-more").on('click', function() { 
    alert($(this).closest('.box').find('.widget-upcoming').html()); 
}); 

DEMO

注：有另一種方式，但我認爲這是最簡單的。