jQuery - 重置下一个元素的 slice()

Question

我有一些 table 。它们都有相同的类，它们都是由相同的代码生成的。我想通过使用 jQuery 隐藏其余行来仅显示每个表的三行。稍后我将添加一个链接以允许用户展开给定的表格，但现在我只想隐藏后面的元素。

我正在使用 slice() 执行此操作，但我注意到 slice() 在移至下一个表时不会重置其索引。我的 jQuery 选择器可能做错了什么。

这是 JSFiddle，无论如何我都会在这篇文章中包含 HTML 和 JS，以防万一。 http://jsfiddle.net/3pf3z/1/

JS

$( document ).ready(function() {
    $( ".booking tr" ).slice(3).hide();
});

HTML

<table class="booking">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
</table>

<br /><br />

<table class="booking">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
</table>

Answer 1

尝试

$(".booking").each(function(){
    $(this).find('tr:lt(3)').hide();   
});

http://jsfiddle.net/3pf3z/2/