jQuery - select table cells without selecting from a nested table

Question

I wrote some jQuery to select the cells from a table with a certain class; in this case, "hello". However, the table has nested tables with a column of the same class. How do I select the cells from the outer table but not select the cells from the inner? See below:

HTML:
<table class="foo"> <!-- this is the outer table
  <tbody>
    <tr>
      <td class="hello"> <!-- select this cell

        <table> <!-- this is the nested table
          <tbody>
            <tr>
              <td class="hello"> <!-- do not select this cell
              </td>
            </tr>
          </tbody>
        </table>

      </td>
    </tr>
  </tbody>
</table>

jQuery:
// this selects the nested cells as well
$('table.foo:first').find('td.hello').doSomething();

Answer 1

What you want is to avoid recursing too deeply, so you can go like this:

$('table:first > tbody > tr > td.hello')

Which, I believe, is equivalent to

$('table:first').children('tbody').children('tr').children('td.hello')

Answer 2

If the classes on the outer table stay, you can just use:

$('table.foo > tbody > tr > td.hello');

One thing to note here perhaps is the fact that the <tbody> element is always present, even if you do not specify it explicitly. Due to the nature of the SGML/HTML/XHTML/whatyacallit definition for the <tbody> element, it has a optional opening tag. Even if the source does not contain it, the DOM element will be created when parsing the table.