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')