How can I elegantly select a parent including its set of direct descendents?
<p>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 <a href="http://docs.jquery.com/Selectors/child" rel="nofollow">'>' operator</a>.</p>

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

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

<pre><code>&lt;table class='toolbar'&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td class='button'&gt;
        ...
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Here is what I've tried:</p>

<p><strong>1. Use 'has'</strong></p>

<pre><code>$("table.toolbar:has(tbody &gt; tr &gt; td.button)")
</code></pre>

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

<p><strong>2. Use '>' and parent()</strong></p>

<pre><code>$("table.toolbar &gt; tbody &gt; tr &gt; td.button").parent().parent().parent()
</code></pre>

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

<p><strong>3. ???</strong></p>

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

<p>Can anyone please help with the nicest way of doing this? <em>Thanks!</em></p>
