jQuery遍历问题

对于此HTML代码：

<table>
    <tr><td>Visible</td></tr>
    <tr><td>Visible</td></tr>
    <tr><td>Visible</td></tr>
    <!-- etc... -->
    <tr style="display:none"><td>Hidden</td></tr>
    <tr style="display:none"><td>Hidden</td></tr>
    <tr style="display:none"><td>Hidden</td></tr>
    <!-- etc... -->
    <tr><td><a class="show-5-more">Show 5 More</a></td></tr>
</table>

我如何做到这一点：

• 选择第一个隐藏的表行，然后选择表行
• 选择下一个，将其向下滑动
• 选择下一个，等等
• 我想对5个隐藏表行执行此操作

---

这将在单击链接的同一表格中向下滑动前五个隐藏行：

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tr:hidden:lt(5)").slideDown();
  return false;
});

如果你想一个接一个地把它们滑下来，你有几个选择。可能最简单的方法是使用超时将它们有效地链接在一起：

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tr:hidden:lt(5)").stop().each(function(i, val) {
    slide_down(this, i, 600);
  });
  return false;
});

function slide_down(el, i, delay) {
  setTimeout(function() {
    $(el).slideDown(delay);
  }, i * delay);
}

或者，您可以尝试将

slideDown（）

上的回调链接在一起

然而，在这种情况下，我的建议是使用

使这一点更容易实现：

<table>
<tbody>
  <tr><td>Visible</td></tr>
  <tr><td>Visible</td></tr>
  <tr><td>Visible</td></tr>
  ...
</tbody>
<tbody style="display: none;">
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  ...
</tbody>
<tbody style="display: none;">
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  <tr><td>Hidden</td></tr>
  ...
</tbody>
<tr><td><a class="show-5-more">Show 5 More</a></td></tr>
</table>

---

对于这类事情，这是一种更为直接的行分组方法。

显示您可以使用的5次

$(function() {
  $('.show-5-more').click(function() {
    $(this).closest('table').data('row', 0);
    slideDownNext.call(this);
  });
});

function slideDownNext() {
  var $table = $(this).closest('table');
  if($table.data('row') < 5) {
    $table.data('row', $table.data('row') + 1);
    $table.find('tr:hidden:first').slideDown('', slideDownNext);
  }
}

$（函数（）{
$（'.show-5-more'）。单击（函数（）{
$（this）.最近的（'table'）。数据（'row'，0）；
向下滑动下一步。调用（此）；
});
});
函数slideDownNext（）{
var$table=$（this）.closest（'table'）；
如果（$table.data（'row'）<5）{
$table.data（'row'），$table.data（'row'）+1）；
$table.find（'tr:hidden:first'）.slideDown（''，slideDown-next）；
}
}

这是可行的，但它们都同时向下滑动，而不是一个接一个地向下滑动。有没有办法等到动画完成后再开始下一张幻灯片动画？啊，看来我误解了+1这更好。所有效果都有一个回调函数…在当前表行显示完成后，是否有方法可以使用回调函数显示下一个效果？更新了不一次向下滑动的场景。这看起来像是显示了所有表行…如何一次只显示5行？

$('a.show-5-more').click(function() {
  $(this).closest("table").find("tbody:hidden:first").slideDown("slow");
  return false;
});

$(function() {
  $('.show-5-more').click(function() {
    $(this).closest('table').data('row', 0);
    slideDownNext.call(this);
  });
});

function slideDownNext() {
  var $table = $(this).closest('table');
  if($table.data('row') < 5) {
    $table.data('row', $table.data('row') + 1);
    $table.find('tr:hidden:first').slideDown('', slideDownNext);
  }
}