我如何优雅地选择父母，包括其直接后代？

Question

我正在使用一堆HTML标记。为了获得可靠的匹配，我使用'>' operator明确查询了一系列元素。

对于这个问题，我试图选择明确的后代链的父级。

例如，我想在以下HTML中选择带有“toolbar”类的表元素：

<table class='toolbar'>
  <tbody>
    <tr>
      <td class='button'>
        ...
      </td>
    </tr>
  </tbody>
</table>

这是我尝试过的：

1。使用'has'

$("table.toolbar:has(tbody > tr > td.button)")

这里的元素是匹配的，即使tbody不是表的直接后代，所以这不能可靠地工作。

2。使用'＆gt;'和父母（）

$("table.toolbar > tbody > tr > td.button").parent().parent().parent()

这可行，但很麻烦。还必须确保包含正确数量的parent（）调用。

第3。 ???

由于垃圾HTML，因此在查询中明确指定元素至关重要在另一个之下的一个直接后代。

有人可以帮助你做最好的方式吗？ 谢谢！的

Answer 1

$("td.button").parents("table.toolbar")

似乎是最简单的方法。

Answer 2

<强>更新
你可以使用：

$("table.toolbar:has(tbody:has(td.button))")

Answer 3

我想：

$（ “td.button”）。最近的（ “table.toolbar”）

Answer 4

$("table.toolbar > tbody > tr > td.button").closest("table.toolbar")

仍然有点混乱，但应该工作。

• closest(expr) documentation