Как я могу элегантно выбрать родителя, включая его набор прямых потомков?

Question

Я работаю с беспорядком разметки HTML. Чтобы получить надежные совпадения, я обратился к явному запросу цепочки элементов, используя оператор '>' .

Для этого вопроса я пытаюсь выбрать родителя явной цепочки потомков.

Например, я бы хотел выбрать элемент таблицы с классом «панель инструментов» в следующем HTML-коде:

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

Вот что я пробовал:

1. Используйте 'has'

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

Здесь элементы сопоставляются, даже если tbody не является прямым потомком таблицы, поэтому это не работает надежно.

2. Используйте '>' и parent ()

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

Это работает, но грязно. Также необходимо убедиться, что указано правильное количество вызовов parent ().

3. ???

Из-за дерьма HTML очень важно, чтобы элементы явно указывались в запросе как один прямой потомок под другим .

Может кто-нибудь помочь с наилучшим способом сделать это? Спасибо!

Answer 1

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

Все еще немного грязно, но должно работать.

• ближайшая (expr) документация

Answer 2

Обновлен:
Вы можете использовать:

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

Answer 3

Я думаю:

$ ( "td.button"). Ближайший ( "table.toolbar")

Answer 4

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

кажется самым простым способом.