Показать 2 от 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> 

Как: когда я нажимаю на шоу более ДИВ, чтобы отобразить следующий 2 скрытые 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').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 диву, IL vaut Mieux п RIEN Mettre его Tout OU 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 listy?

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