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>匹配 - 您需要将其更改为选择直接子项而不是子项：

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

如果<tbody>位于<tr>，<tbody>或<thead>内，则隐含<tfoot>元素，因此您还需要<tr> s成为第一个<tbody>的直接后代。

Answer 3

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

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

这可以帮助您理解为什么选择内部表。为避免这种情况，请使用上面发布的使用“＆gt;”的解决方案直系后裔资格赛。

Answer 4

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

这应该更接近你想要的东西：

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

jQuery选择器问题

4 个答案: