jQuery 选择器问题

发布于 2024-08-03 22:01:06 字数 1333 浏览 8 评论 0原文

我有这个选择器：

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

但为什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抽个烟儿 2024-08-10 22:01:06

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

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

jQuery 文档中的此部分将提供更多帮助： http://docs.jquery .com/选择器

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

回复收藏 0 原文

清旖 2024-08-10 22:01:06

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

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

如果位于、或内部，因此您还需要是第一个的直接后代。

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

回复收藏 0 原文

妳是的陽光 2024-08-10 22:01:06

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

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

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

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.

回复收藏 0 原文

薔薇婲 2024-08-10 22:01:06

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

这应该更接近你想要的：

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

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: