如何一次加载多个div

我有5个div，并伴有一个loadmore按钮，一次显示一个隐藏的div。 显示最后一个div后，显示按钮将被禁用。

如何在时间而不是一个显示2个div？

Load More
 
 Initially display 
 
 1 Hide until you click load more 
 
 2 Hide until you click load more 
 
 3 Hide until you click load more 
 
 4 Hide until you click load more 
 $("#load-more").click(function() { // show the next hidden div.group, then disable load more once all divs have been displayed }); 

到目前为止，我有以下jquery加载1 div而不是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'); } });