Проблема с селектором jQuery

Question

У меня есть этот селектор:

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

Но мне интересно, почему эта внутренняя таблица тоже выбрана:

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

Свойство.length возвращает 6, то есть общее количество.

Но почему?

Answer 1

Ваш селектор выбирает всех потомков. Чтобы выбрать ближайших детей, используйте это:

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

Этот раздел в документации JQuery поможет больше: http://docs.jquery.com/Selectors

Answer 2

Ваш селектор соответствует подстол <tr>s - вам нужно изменить его, чтобы выбрать прямых потомков вместо потомков:

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

<tbody> элемент подразумевается, если <tr> это внутри <tbody>, <thead> или же <tfoot>так что вам также нужно <tr>быть прямыми потомками первого <tbody>,

Answer 3

Думайте о пространствах между селекторами как о подстановочных знаках:

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

Это должно помочь вам понять, почему выбирается внутренняя таблица. Чтобы избежать этого, используйте решения, опубликованные выше, которые используют ">" квалификатор непосредственного потомка.

Answer 4

Потому что у вас есть больше строк, которые соответствуют критериям селектора. Вам нужно будет установить класс деталей для всех строк внутренней таблицы, если вы не хотите, чтобы они были выбраны.

Это должно быть ближе к тому, что вы хотите:

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