Question

我有10个名为sample

的div

<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 [其他div为无]

第二次点击：显示div3和div4 [其他div为无]

等...

如何使用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();

要动态显示div

3 个答案: