javascript - onclick 获取 child 的祖 parent

Question

我想通过点击每个子元素来获取祖父id，使用event.target.parentNode.id但它只是返回当前元素的父元素，目标是单击每个子项时获取#HereIAm id。有什么想法吗？

$(window).click(function(event) {
  console.log(event.target.parentNode.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="HereIAm">

  <ul>
    <li><a>click me</a></li>
    <li>click me</li>
  </ul>
  <span>click me</span>
  <div>
    <div>
      <span>click me</span>
    </div>
  </div>
  
</div>

Answer 1

给定 HTML，一种选择是使用 .closest并使用选择器字符串 div[id]选择最近的祖先 id属性:

$(document).click(function({ target }) {
  const closest = target.closest('div[id]');
  if (closest) console.log(closest.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="HereIAm">

  <ul>
    <li><a>click me</a></li>
    <li>click me</li>
  </ul>
  <span>click me</span>
  <div>
    <div>
      <span>click me</span>
    </div>
  </div>
  
</div>