Question

I have the following HTML:

<table id="myTable">
  <tr>
    <td><div>test</div></td>
  </tr>
  <tr>
    <td><div>test</div></td>
  </tr>
</table>

I have a reference to #myTable in the variable $myTable.

How can I select all descendant div tags without using the string #myTable again (i.e. use the $myTable object only)?

To clarify, assuming this example worked:

$('#myTable div')

… it fails to meet my criteria, since I don’t want to retype #myTable.

Additionally, I’d prefer not having to specify each parent in the hierarchy like this:

$myTable.children('tr').children('td').children('div')

I tried using

$myTable.children('div')

… but it seems to only select immediate children, which the div elements are not.

I want to use something terse like this:

$myTable.descendants('div')

Answer 1

You can use the find function in jQuery.

$myTable.find('div');

Alternatively you can specify the scope like this:

$('div', $myTable);

both should return the same set