jQuery selector problem

Question

Hi!

I have this selector:

$("table.details tbody tr:not(.details)")

But I'm wondering why this inner table gets selected too:

<table class="items details">
    <thead>
        <tr>
            <th style="width: 90%;">Test application</th>
            <th style="width: 10%;">Sent to test</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>6456</td>
            <td>8/29/2009</td>
        </tr>
        <tr class="details">
            <td colspan="2">
                <table>
                    <tr>
                        <td style="width: 100px;">Description:</td>
                        <td>2312313</td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td>Test URL Test</td>
                        <td><a href="Test2" title="Visit test application">Test2</a></td>
                    </tr>     
                </table>
            </td>
        </tr>
    </tbody>
</table>

A .length property returns 6, which is the number of in total.

But WHY?

Answer 1

You selector is selecting all descendents. To select the immediate children, use this:

$("table.details > tbody > tr:not(.details)")

This section in the jQuery docs will help more: http://docs.jquery.com/Selectors

Answer 2

Because you have more rows that match the selector criteria. You would need to set the details class on all of your inner table rows if you don't want them selected.

This should be closer to what you want:

$("table.details tbody tr:first");

Answer 3

Your selector matches the sub-table's <tr>s - you need to change it to select direct children instead of descendants:

$("table.details > tbody > tr:not(.details)")

A <tbody> element is implied if a <tr> is inside <tbody>, <thead> or <tfoot>, so you also need the <tr>s to be direct descendants of the first <tbody>.

Answer 4

Think of spaces between selectors as wildcards:

table.details * tbody * tr:not(.details)

This should help you understand why the inner-table is being selected. To avoid this, use the solutions posted above that use the ">" immediate-descendant qualifier.