遞歸獲取父div

Question

我有這個HTML

<div id="main-container">
   <div style="style-here" data-status="active" data-state="loaded">
      <div style="style-here">
         <div style="style-here" {{click_event}}></div>
      </div>
   </div>
   <div style="style-here" data-status="active" data-state="unloaded">
      <div style="style-here">
         <div style="style-here" {{click_event}}></div>
      </div>
   </div>
   <div style="style-here" data-status="inactive" data-state="unloaded">
     <div style="style-here">
         <div style="style-here" {{click_event}}></div>
      </div>
   </div>
</div>

在單擊具有{{click_event}}的元素之一時，我想進行遞歸搜索，直到找到具有數據狀態或數據狀態的元素為止，在最壞的情況下，當我從上到下遇到id時，搜索。

HTML是由另一個JS文件生成的，我無法更改其生成方式。 有沒有一種方法可以使用jQuery closest或parent jQuery來搜索data屬性？

謝謝。

Answer 1

無需遞歸，可以使用closest() ：

$clickedElement.click(function() {
    var $parent = $(this).closest('[data-status], [data-state], #main-container');
});