如何通过onclick事件动态获取顶级父DIV的ID？

方案一：用closest()直接遍历祖先（简洁直观） #

closest()方法可以快速定位当前元素最近的匹配选择器的祖先元素，完美适配你的需求——不用写死父ID，直接找到目标顶级DIV：

修改后的代码： #

<div id="fruits">
  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="getTopParentId(this)">SELECT ALL</button>
    </div>
    <ul>
      <li><input type="checkbox" class="class-check" value="BANANA" onclick="getTopParentId(this)" />BANANA</li>
    </ul>
  </div>
</div>

<div id="animals">
  <div class="class-container">
    <div class="class-controls">
      <button type="button" class="class-all" onclick="getTopParentId(this)">SELECT ALL</button>
    </div>
    <ul>
      <li><input type="checkbox" class="class-check" value="DOG" onclick="getTopParentId(this)" />DOG</li>
    </ul>
  </div>
</div>

<script>
function getTopParentId(element) {
  // 找到最近的带ID属性的父级DIV
  const topDiv = element.closest('div[id]');
  if (topDiv) {
    const topId = topDiv.id;
    console.log('顶级父DIV的ID：', topId);
    // 这里可添加你需要的业务逻辑，比如操作该顶级DIV
  }
}
</script>

补充说明：

• 所有子元素的onclick统一调用getTopParentId(this)，this代表当前点击的元素（按钮/复选框）
• 如果你的顶级DIV有统一类名（比如class="top-container"），可以把选择器改成closest('.top-container')，避免误匹配其他带ID的DIV，逻辑更严谨

方案二：事件委托（适合大量元素场景） #

如果页面存在大量同类顶级容器和子元素，用事件委托可以避免逐个绑定onclick，性能更优：

修改后的代码： #

<!-- 给所有顶级容器加统一父容器，也可以直接绑定到body -->
<div class="main-wrapper">
  <div id="fruits">
    <div class="class-container">
      <div class="class-controls">
        <button type="button" class="class-all">SELECT ALL</button>
      </div>
      <ul>
        <li><input type="checkbox" class="class-check" value="BANANA" />BANANA</li>
      </ul>
    </div>
  </div>

  <div id="animals">
    <div class="class-container">
      <div class="class-controls">
        <button type="button" class="class-all">SELECT ALL</button>
      </div>
      <ul>
        <li><input type="checkbox" class="class-check" value="DOG" />DOG</li>
      </ul>
    </div>
  </div>
</div>

<script>
// 给父容器绑定一次点击事件
document.querySelector('.main-wrapper').addEventListener('click', function(e) {
  // 判断点击的是目标元素（按钮或复选框）
  if (e.target.classList.contains('class-all') || e.target.classList.contains('class-check')) {
    // 定位顶级父DIV
    const topDiv = e.target.closest('div[id]');
    if (topDiv) {
      const topId = topDiv.id;
      console.log('顶级父DIV的ID：', topId);
      // 执行你的业务逻辑
    }
  }
});
</script>

补充说明：

• 无需给每个子元素写onclick，仅需给父容器绑定一次事件
• 通过e.target判断点击对象是否为我们关注的按钮或复选框
• 同样用closest()定位顶级父DIV，逻辑和方案一一致

内容的提问来源于stack exchange，提问作者brut65