javascript - 点击获取孩子的祖父母

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>

Answer 2

如果您想通过点击点击我获得HereIAm，您可以简单地访问点击我的父级的父级

function getGrandParent(target){
  if(target.parentElement.id === 'HereIAm'){
    console.log(target.parentElement.id)
  }else{
    getGrandParent(target.parentElement);
  }
}

<div id="HereIAm">

  <ul>
    <li onclick='getGrandParent(this)'><a>click me</a></li>
    <li onclick='getGrandParent(this)'>click me</li>
  </ul>
  <span onclick='getGrandParent(this)'>click me</span>
  <div>
    <div>
      <span onclick='getGrandParent(this)'>click me</span>
    </div>
  </div>
  
</div>