如何一次加載多個div

Question

我有5個div伴隨着一個loadmore按鈕，它一次顯示一個隱藏的div。一旦顯示最後一個div，顯示按鈕將變爲禁用狀態。

如何在時間而不是一個顯示2個div？

<p><a href="#" id="load-more">Load More</a></p> 

<div class="group active" id="group1"> 
Initially display 
</div> 

<div class="group" id="group2"> 
1 Hide until you click load more 
</div> 

<div class="group" id="group3"> 
2 Hide until you click load more 
</div> 

<div class="group" id="group4"> 
3 Hide until you click load more 
</div> 

<div class="group" id="group5"> 
4 Hide until you click load more 
</div> 

$("#load-more").click(function() { 
    // show the next hidden div.group, then disable load more once all divs have been displayed 
}); 

到目前爲止，我有以下的jQuery它加載1個格，但不是2

JQuery的

var $group = $('.group'); 

$("#load-more").click(function() { 
// Prevent event if disabled 
if ($(this).hasClass('disable')) return; 

var $hidden = $group.filter(':hidden:first').addClass('active'); 
if (!$hidden.next('.group').length) { 
    $(this).addClass('disable'); 
} 
}); 

演示：http://jsfiddle.net/8Re3t/7/

Answer 1

正如下面添加var $hidden1 = $group.filter(':hidden:first').addClass('active');，它會工作:)

var $group = $('.group'); 

    $("#load-more").click(function() { 

     if ($(this).hasClass('disable')) return false; 

     var $hidden = $group.filter(':hidden:first').addClass('active'); 
     var $hidden1 = $group.filter(':hidden:first').addClass('active'); 

     if (!$hidden.next('.group').length) { 
      $(this).addClass('disable'); 
      $(this).next().addClass('disable'); 
     } 
    }); 

Answer 2

這也適用於你。

var $group = $('.group'); 

    $("#load-more").click(function() { 

     if ($(this).hasClass('disable')) return false; 

     var getNextTwo = $('.active').last().nextAll().slice(0, 2).addClass('active'); 
     if($('.group').is(':hidden') === false) { 
      $(this).addClass('disable'); 
     } 
    });