【问题标题】：jQuery show one next sibling at a time on clickjQuery在点击时一次显示一个下一个兄弟
【发布时间】：2015-10-08 04:10:39
【问题描述】：

我试图在单击按钮时一次显示一个隐藏行，但它们都同时显示，因为它们具有“行”类 - 默认情况下显示第一行，其余行被隐藏

我不能使用 Id 选择器，因为它是服务器端的并且是动态的，所以我怎样才能在每次点击时只显示下一行/兄弟，直到没有剩余？我可以为每个行类附加一个计数器，但是当尝试使用该计数器选择 jQuery 中的下一行时，这无济于事

这就是我所拥有的，一键显示所有行

<script>
 $(".myButton").click(function() {
    $('.container .row').next('.row:hidden').slideDown();
 });
</script>

<div class="container">
    <!-- 1st row not hidden by default -->
    <div class="row">
    <div class="row">
    <div class="row">
</div>

提前感谢您的帮助！

【问题讨论】：

查看 jQueries .index() 和 .eq() 您可以使用 .index() 找到索引号，您可以使用 .eq() 选择特定行。您可能还想查看.next()
包括一个小提琴（或其他演示）

标签： javascript jquery html

【解决方案1】：

$('.container .row:visible').last().next('.row:hidden').slideDown();

如果您所做的只是按顺序显示它们，那么您无需跟踪哪些是活动的。您可以简单地使用可见性来始终选择最后一个。

您所做的只是将:visible 添加到行选择中，以查找所有可见行；然后使用last() 方法仅引用该堆栈的最后一个。这允许只为一个元素（最后一个）调用next()，而不是容器中的所有行。

为了进一步简化（并调用更少的方法），您可以选择仅选择第一个隐藏行：$('.container .row:hidden:first').slideDown(); 或 $('.container .row:hidden').first().slideDown();

Fiddle

【讨论】：

谢谢！这正是我所需要的！

【解决方案2】：

如果您将“选定”类添加到第一行，则可以这样做：

<script>
  $(".myButton").click(function() {
    $('.container .row.selected')
      .removeClass('selected')
      .hide()
      .next()
      .addClass('selected')
      .slideDown();
  );
</script>

<div class="container">
    <div class="row selected">
    <div class="row">
    <div class="row">
</div>

【讨论】：

如果您需要了解活动幻灯片，我会对此表示赞同。可能有不止一张可见（如三张幻灯片），但要突出显示选定/活动的一张。对于这样的事情，隐藏/可见性可能还不够。

【解决方案3】：

您可以尝试遍历集合以显示正确的集合。请参阅此 JSFiddle：http://jsfiddle.net/gjqb6m83/

var i = 0; 
var collection = $(".row");

$(".myButton").click(function() {    
    $(collection).css('display', 'none');
    $(collection[i]).slideDown();
    i++
    i = i % collection.length;
 });

【讨论】：

【解决方案4】：

你可以使用:nth-child()

$(document).ready(function() {
    var counter = 1;
    $(".myButton").click(function() {
        counter++;
        $('.container .row').hide();
        $('.container .row:nth-child(' + counter + ')').slideDown();
    });
});

.row {
    display:none;
}
.row:nth-child(1) {
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">My Button</button>
<div class="container">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
    <div class="row">row 4</div>
    <div class="row">row 5</div>
</div>

【讨论】：

【解决方案5】：

使用另一个 jQuery-pseudo-selector :first

$(".myButton").click(function() {
    $('.container .row:hidden:first').slideDown()
 });

别忘了关闭你的div！看https://jsfiddle.net/kswmktce/1/

【讨论】：

【解决方案6】：

另一种解决方案。这个一次只显示一个，完成后重新开始。

$(".myButton").click(function() {
  $(".row:visible").next().slideDown();
  $(".row:visible").first().hide();

  if (!$(".row:visible").length)
    $(".row").first().slideDown();
});

.row {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="myButton">Click ME</button>

<div class="container">
  <div class="row">a</div>
  <div class="row">b</div>
  <div class="row">c</div>
  <div class="row">d</div>
  <div class="row">e</div>
</div>

【讨论】：