jquery - クリック時に 2 x 2 要素を表示

Question

次のコンテナがあります。

   <div id="container">
        <div id="1">1</div>
        <div id="2">2</div>
        <div id="3" style="display:none">3</div>
        <div id="4" style="display:none">4</div>
        <div id="5" style="display:none">5</div>
        <div id="6" style="display:none">6</div>
    </div>

    <div id="more_results">Show 2 more results</div>

方法: show more div をクリックすると、次の 2 つの非表示の div (3 と 4) が表示されます。そして、もう一度クリックすると、div (5 と 6) が表示されます

デモ jsFiddle。

Answer 1

$('#more_results').click(function(){
    $('#container div:visible:last').nextAll('div').slice(0,2).show();
});​

Answer 2

$('#more_results').on('click',function (e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.stop();

    var num = 0;
    $("#container").children().each(function () {
        if ($(this).is(':hidden')) {
        if (num <= 2) {
            $(this).show();
            num++;
        }
    }
});

Answer 3

IDまず、これをすべて使用する必要はありませんCLASS。代わりに 1 つを使用してください。

デモ JSFIDDLE

var visible = 2;      // setup here initial number of visible elements

$('.element').slice(visible).hide();   // DOM READY // apply setup

$('#more_results').click(function(){
    $('.element').slice(0,visible+=2).show();  // (for the first click: get Index 0 - to 4 (excluding 4) ) and so on... we increase by 2
});