顯示上點擊

Question

2×2的元素，我有以下容器：

<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）。然後，如果他們再次單擊顯示格（5,6）

DEMO 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代替！

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

Answer 4

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

    }); 
});​ 

雷馬克：一個MOINS qu'il羅緞ABSOLUMENT utiliser未identifiant倒TES的div，IL vaut mieux NE奧布萊恩mettre杜兜售歐mettre德班。 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/