递归获取父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文件生成的，我不能改变它的方式。有closest或parent jQuery来搜索data属性后的方法吗？

谢谢。

Answer 1

无需递归，您可以使用closest()：

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