jQuery - 为下一个元素重置 slice()答案

【问题标题】：jQuery - reset slice() for the next elementjQuery - 为下一个元素重置 slice()
【发布时间】：2014-02-19 22:53:35
【问题描述】：

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

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

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

$( 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>

【问题讨论】：

这个问题有三个很好的答案。一个因将我指向 each() 而脱颖而出。
感谢您澄清接受。帮助我们改进未来的答案 =)。

标签： jquery reset slice

【解决方案1】：

试试

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

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

【讨论】：

【解决方案2】：

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

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

演示地址：http://jsfiddle.net/efWpN/1/

jQuerydocs on each()

【讨论】：

谢谢，这就是正确的！我不知道 each()，所以 jQuery 文档链接提供了很好的阅读。

【解决方案3】：

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

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

【讨论】：