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

尝试

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

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

Answer 2

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

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

Answer 3

一种解决方案是使用each()：

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

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

jQuery docs on each()

jQuery - 为下一个元素重置slice（）

3 个答案: