Question

我试图在按钮点击时一次显示一个隐藏的行，但它们都会立即显示，因为它们有类“行” - 默认显示第1行，其余部分隐藏

我不能使用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>

提前感谢您的帮助！

Answer 1

如果您添加课程＆＃34;已选择＆＃34;到第一行比你能做到的那样：

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

Answer 2

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

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

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

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

Answer 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;
 });

Answer 4

您可以使用:nth-child()

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

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

并且不要忘记关闭你的div ！看https://jsfiddle.net/kswmktce/1/

Answer 6

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

＆＃13;

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

＆＃13;

.row {
  display: none;
}

＆＃13;

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

＆＃13;

jQuery在点击时一次显示一个下一个兄弟

6 个答案:

{{3}}