How can I elegantly select a parent including its set of direct descendents?

Question

I'm working with a mess of HTML markup. In order to get reliable matches I have resorted to explicitly querying a chain of elements using the '>' operator.

For this question I am attempting to select the parent of an explicit chain of descendents.

For example, I'd like to select the table element with class 'toolbar' in the following HTML:

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

Here is what I've tried:

1. Use 'has'

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

Here elements are matched even if tbody isn't a direct descendent of table so this doesn't reliably work.

2. Use '>' and parent()

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

This works but is messy. Also have to make sure the correct number of parent() calls are included.

3. ???

Due to the crap HTML, it is critical that elements are explicitly given in the query as one direct descendent beneath another.

Can anyone please help with the nicest way of doing this? Thanks!

Answer 1

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

seems the easiest way.

Answer 2

Updated:
you can use:

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

Answer 3

I think:

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

Answer 4

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

Still a bit messy but should work.

• closest(expr) documentation