通過遍歷DOM向後獲取最接近的元素

Question

我想用jQuery獲取DOM元素，但我只想在DOM中向後看。

因此，假設我有以下HTML結構：

<div id="content"> 
    <div id="first-module" class="module"> 
     <h3>Some Module</h3> 
     <p>Lorem ipsum... </p> 

     <div id="some-other-content"> 
      <div id="second-module" class="module"> 
       <h3>Some other module</h3> 
       <p>Dolor sit amet...</p> 
       <button class="trigger">Trigger 1</button> 
      </div> 
     </div> 

     <button class="trigger">Trigger 2</button> 
     <div id="third-module" class="module"> 
      <h3>Another module</h3> 
     </div> 
    <div> 
</div> 

$('.trigger').click(function() { 
    // Traverse DOM to find closest .module class 
}); 

所以，當我在Trigger 1按鈕點擊我希望它找到div ID爲second-module。

當我Trigger 2點擊我希望它找到div ID爲first-module和不second-module，因爲它嵌套深於Trigger 2按鈕。

有沒有這個jQuery函數？

Answer 1

嘗試使用.closest()

$('.trigger').click(function() { 
    $(this).closest('.module'); 
}); 

Answer 2

是的，我們確實有.closest()此：

$('.trigger').click(function() { 
    // Traverse DOM to find closest .module class 
    var id = $(this).closest('.module').attr('id'); 
    alert(id); 
}); 

DEMO HERE

Answer 3

另一種方式來訪問它使用parent selector

$('.trigger').click(function() { 
    console.log($(this).parent('.module').attr('id')); 
    // Traverse DOM to find closest .module class 
});