2

我有这个选择器：

$("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，即总数。

但为什么？

4

4 回答 4

4

您的选择器正在选择所有后代。要选择直接子级，请使用以下命令：

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

jQuery 文档中的这一部分将提供更多帮助： http: //docs.jquery.com/Selectors

于 2009-09-03T07:24:47.753 回答
2

您的选择器与子表的<tr>s 匹配 - 您需要将其更改为选择直接子代而不是后代：

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

如果 a在内部，则隐含一个<tbody>元素，或者，因此您还需要s 是第一个的直接后代。<tr><tbody><thead><tfoot><tr><tbody>

于 2009-09-03T07:28:48.210 回答
1

将选择器之间的空格视为通配符：

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

这应该可以帮助您理解为什么选择内部表。为避免这种情况，请使用上面发布的使用 ">" 直接后代限定符的解决方案。

于 2009-09-03T07:31:42.993 回答
0

因为您有更多符合选择器条件的行。如果您不想选择它们，则需要在所有内部表行上设置详细信息类。

这应该更接近您想要的：

$("table.details tbody tr:first");
于 2009-09-03T07:27:41.613 回答