要顯示DIV動態

Question

我已經10個格與名sample

<div name="sample">div1</div> 
<div name="sample">div2</div> 
<div name="sample">div3</div> 
<div name="sample">div4</div> 
<div name="sample">div5</div> 
<div name="sample">div6</div> 
<div name="sample">div7</div> 
<div name="sample">div8</div> 
<div name="sample">div9</div> 
<div name="sample">div10</div> 
<input type="button" id="display" value="display"> 

一次顯示按鈕，點擊我要顯示兩個DIV

第一次點擊：顯示DIV1和DIV2 [其他分區都沒有]

第二次點擊：顯示DIV3和DIV4 [其他分區是無]

等等

如何用jQuery

Answer 1

$('#display').bind('click', function() { 
    var $divs = $('div'), 
     offset = 0; 

    return function() { 
     $divs.hide().slice(offset, offset+2).show(); 
     offset += 2; 

     if(offset === 10) 
      offset = 0; 
    }; 
}()).click(); 

演示：http://www.jsfiddle.net/yNABj/3/

Answer 2

做到這一點有了這個腳本，每個按鈕被點擊時，2個div的顯示和其他隱藏：

$('#display').click((function() { 
    var divs = $('div[name="sample"]'); 
    var offset = 0; 
    return function() { 
     if (offset >= divs.length) offset = 0; 
     divs.hide().slice(offset, offset+2).show(); 
     offset += 2; 
    }; 
})()); 

每次點擊按鈕，顯示下兩個div，其他div隱藏。一旦所有div都顯示出來，它會重新啓動。

（這已經部分地被jAndy's solution啓發，而他刪除了他的答案）

Answer 3

您可以使用:nth-child

$('div[name=sample]:nth-child(1)').show(); 
$('div[name=sample]:nth-child(3)').show(); 

然後

$('div[name=sample]:nth-child(2)').show(); 
$('div[name=sample]:nth-child(4)').show();