jQuery - 重置切片（）爲下一個元素

Question

我有一些表。它們都具有相同的類，它們都由相同的代碼生成。我想通過使用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

一種解決方案是使用each()：

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

演示在：http://jsfiddle.net/efWpN/1/

jQuery的docs on each()

Answer 2

嘗試

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

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

Answer 3

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

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