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时，显示下两个隐藏的div（3和4）。然后，如果他们再次点击显示div（5和6）

DEMO jsFiddle.

Answer 1

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

Answer 2

$('#more_results').click(function(){

    var LoopTimes = 0;
    $('#container').children().each(function () {

        if ($(this).is(':visible') === false) {

              $(this).show();
              LoopTimes = LoopTimes + 1; 
        }

        if (LoopTimes === 2) { return false; }

    });
});

Remarque：moins qu'il faille ABSOLUMENT utiliser unntifity pour tes divs，il vaut mieux ne rien mettre du tout ou mettre des classes。 Avec des classes，au lieu de faire $（'＃2'）... tu peux ecrire $（'。MaClasse'）。eq（2）... Ca permet de faire du code plus propre，plus pro。 Sinon，qu'est-ce que tu fais si sur ta page，tu as plusieurs listes？

http://jsfiddle.net/wpbBJ/2/

Answer 3

$('#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 4

首先，您不需要全部ID，而是使用单个CLASS！

的 DEMO 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 });

点击时显示2个2元素

4 个答案: