如何获取带foo类的tr元素在其所属表格内的索引而非全局索引

我需要获取带有foo类的tr元素在其所属表格内部的同类型元素索引，仅统计当前table内部的该类元素，而非统计页面body中所有的foo类元素。我期望得到的输出效果如下：

而非如下全局统计的错误效果：

我尝试了如下代码，但运行后得到的是tr在整个页面所有foo类元素中的索引，而非其所属表格内部的索引：

现有JS代码

document.querySelectorAll("td").forEach(i => {
  $(i).text($(i).closest("tr").index(".foo"))
})

现有CSS代码

table {
  border-collapse: collapse;
  float: left;
  margin: 2px;
}

th,
td {
  border: thin solid lightgrey;
  height: 15px;
  padding: 5px;
}

现有HTML代码

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>

<body>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
  <table>
    <tr>
      <th>TABLE</th>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
    <tr class="foo">
      <td></td>
    </tr>
  </table>
</body>

</html>

解决方案 #

原有代码的问题在于index(".foo")是在全局文档范围内匹配所有.foo元素计算索引，所以会跨表格统计。只需要先定位到当前tr所属的table，再在该表格范围内查询所有tr.foo元素计算索引即可，修改后的JS代码如下：

document.querySelectorAll("td").forEach(i => {
  const $tr = $(i).closest("tr");
  // 限定仅在当前所属表格内统计.foo类tr的索引
  const tableInnerIndex = $tr.closest("table").find("tr.foo").index($tr);
  $(i).text(tableInnerIndex);
})

CSS和HTML代码无需改动，运行后即可得到预期的每个表格内部单独从0开始计数的效果。

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