Clever Geek Handbook

JQuery selector issue

I have this selector:

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

But I'm wondering why this inner table is also selected:

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

The .length value returns 6, which is a number in general.

But why?

+2


source to share


4 answers


You select all descendants. To select immediate children, use the following:

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


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

+4


source


Your selector matches a subcategory <tr>

- you need to change it to select direct children instead of descendants:

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


A is <tbody>

implied if a <tr>

is inside <tbody>

, <thead>

or <tfoot>

, so you also need to <tr>

be a direct descendant of the former <tbody>

.

+2


source


Think of the spaces between selectors as wildcards:

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

This will help you understand why the internal table is being selected. To avoid this, use the above solutions, which use the ">" specifier with an immediate descendant.

+1


source


As you have more rows matching your selection criteria. You will need to set the data class on all internal rows of the table if you don't want them to be selected.

This should be closer to what you want:

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


source






More articles:


All Articles