如何在JavaScript中获取子按钮点击时父级div的索引

<div class="container">
  <!-- 索引 0 -->
  <div class="row">
    <button>点击</button>
  </div>
  <!-- 索引 1 -->
  <div class="row">
    <button>点击</button>
    <button>更多按钮</button>
    <button>另一个按钮</button>
  </div>
  <!-- 索引 2 -->
  <div class="row">
    <button>点击</button>
  </div>
</div>

// 获取所有具有 "row" 类的父级 div
let rows = document.querySelectorAll(".row");

rows.forEach((rowElement, index) => {
  // 为每个 .row 元素添加点击事件监听器
  rowElement.addEventListener("click", (event) => {
    // 检查被点击的元素 (event.target) 是否是按钮
    // 使用 Array.prototype.some 检查 event.target 是否是当前 rowElement 内的任何一个按钮
    let isBtnClicked = [...rowElement.querySelectorAll("button")].some(
      (btn) => event.target === btn
    );

    // 如果是按钮被点击，则输出父级 div 的索引及其对应的 DOM 元素
    if (isBtnClicked) {
      console.log(`按钮被点击！父级 .row 的索引是: ${index}`);
      console.log("对应的 .row 元素:", rowElement);
      // 或者通过 document.querySelectorAll(".row")[index] 再次确认
      // console.log("通过全局选择器获取的 .row 元素:", document.querySelectorAll(".row")[index]);
    }
  });
});

// 选中每个 .row 元素内的第一个按钮
let firstRowButtons = document.querySelectorAll(".row button:first-child");

firstRowButtons.forEach((buttonElement, index) => {
  // 为每个选中的按钮添加点击事件监听器
  buttonElement.addEventListener("click", () => {
    // 此时的 index 直接对应其父级 .row 的索引
    console.log(`第一个按钮被点击！父级 .row 的索引是: ${index}`);
    console.log("对应的 .row 元素:", document.querySelectorAll(".row")[index]);
  });
});

let rows = document.querySelectorAll(".row");

rows.forEach((rowElement, index) => {
  rowElement.addEventListener("click", (event) => {
    // 检查被点击的元素 (event.target) 是否是当前 rowElement 的第一个按钮
    if (event.target === rowElement.querySelector("button:first-child")) {
      console.log(`第一个按钮被点击！父级 .row 的索引是: ${index}`);
      console.log("对应的 .row 元素:", rowElement);
    }
  });
});

.row {
  border: 1px solid red;
  padding: 1rem;
  margin-bottom: 0.5rem; /* 增加一点间距 */
}