jquery - 点击时显示 2 by 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>

如何：当我单击显示更多 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！

演示 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
});