jQuery 隐藏第三行之后的表格行

Question

我想使用 jQuery 隐藏表中第三行之后的所有行。这是我的方法:

<table>
    <tr id="duplicate">
        <td style="text-align:center;">1</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">2</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">3</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">4</td>
    </tr>
    <tr id="duplicate">
        <td style="text-align:center;">5</td>
    </tr>
</table>

jQuery:

$(document).ready(function() {
    $('#duplicate'):nth-child(n+3).hide();
    alert('123');
});

当然，警报显示得很好，因此它被执行，但我的表没有任何结果。

Answer 1

永远不要为每个tr使用相同的id...永远不要。 Id 在 HTML 中具有唯一的名称。您不会收到警告，但代码不会被正确处理。

使用类而不是 id。

 <tr class="duplicate">
        <td style="text-align:center;">1</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">2</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">3</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">4</td>
    </tr>
    <tr class="duplicate">
        <td style="text-align:center;">5</td>
    </tr>
...

和 JavaScript:

$(document).ready(function() {
    $('.duplicate:gt(2)').hide();
    alert('123');
});