javascript - 如何遍历DOM以查找Javascript中具有特定属性的最后祖先？

这是我的示例HTML：

<div id="parent1" data-attribute="parent">
  <div id="child2" data-attribute="child">
    <div id="grandchild4" data-attribute="child">
    </div>
  </div>
</div>
<div id="parent2" data-attribute="parent">
  <div id="child3" data-attribute="child">
    <div id="grandchild1" data-attribute="parent">
      <div id="item1"></div>
    </div>
  </div>
  <div id="child4" data-attribute="parent">
    <div id="grandchild2" data-attribute="child">
      <div id="grandchild3" data-attribute="parent">
        <div id="item2" data-attribute="child">
          <div id="sub1" data-attribute="child">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果我正在执行查询选择的当前元素是sub1，如何找到data-attribute="parent"的最后祖先？在这种情况下，预期结果应为parent2。

我知道closest()将返回第一个匹配项，即grandchild3，但是有没有类似选择器来找到最终祖先？不能选择id进行查询，因为我的ID是动态创建的。

最佳答案

首先，要查找所有祖先，可以组合两个条件[data-attribute="parent"]和[id^="parent"]。 More on wildcard selectors

$('div[id^="parent"][data-attribute="parent"]')

现在，一旦有了所有祖先，last()应该立即给您一个。请在下面找到代码段

console.log($('div[id^="parent"][data-attribute="parent"]').last().attr('id'))

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="parent1" data-attribute="parent">
  <div id="child2" data-attribute="child">
    <div id="grandchild4" data-attribute="child">
      grandchild4
    </div>
  </div>
</div>
<div id="parent2" data-attribute="parent">
  <div id="child3" data-attribute="child">
    <div id="grandchild1" data-attribute="parent">
      grandchild1
      <div id="item1">item1</div>
    </div>
  </div>
  <div id="child4" data-attribute="parent">
    <div id="grandchild2" data-attribute="child">
      <div id="grandchild3" data-attribute="parent">
        grandchild3
        <div id="item2" data-attribute="child">
          item2
          <div id="sub1" data-attribute="child">
            sub1
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - 如何遍历DOM以查找Javascript中具有特定属性的最后祖先？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58126606/