一度に複数のdivを読み込む方法

Question

私は一度に1つの隠しdivを表示するloadmoreボタンを伴って5つのdivを持っています。最後のdivが表示されたら、表示ボタンは無効になります。

1つではなく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 
}); 

これまでのところ、私は1つのdivをロードし、次のjQueryを持ってではなく、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'); 
     } 
    });