递归获取父 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');
});

递归获取父 div

Get parent div recursively

html

javascript

recursion

jquery