Javascript 显示数组中的某些元素

我有一个6个div（尽管代码应该适用于任意数量的div）。我想在单击按钮“更多项目”时显示4个

div

。理想情况下，第一次单击

#更多项目

时会显示前4个div，再次单击时会隐藏所有div，然后显示下一个

div

。在这种情况下，它将是5，6将与1和2一起显示。每当单击

#更多项目

时，将显示接下来的四个

div

。下面是我的方法，但我不知道如何进步

$（“#更多项目”）。在（'click'，function（）上{
var项目=[]；
显示的var=[]；
var start=[]；
$（'.thumbnail cnt'）。每个（函数（i）{
projects.push（$（this.data（'num'））；
})
显示的var=projects.slice（0,4）；
$（'[data num=“”+已显示。连接（'”]，[data id=“”）+'”]）。添加类（'visible'）；
});
.cnt缩略图{
显示：无；
}
.可见{
显示：块；
}
我会尝试为每个div分配一个id，比如：

<div class="thumbnail-cnt" id="div1" data-num="1">
</div>
<div class="thumbnail-cnt" id="div2" data-num="2">
</div>
<div class="thumbnail-cnt" id="div3" data-num="3">
</div>
<div class="thumbnail-cnt" id="div4" data-num="4">
</div>
<div class="thumbnail-cnt" id="div5" data-num="5">
</div>

使用
阵列
已成功旋转div。检查这是否是您正在寻找的：


var divs=[]；
$（'.thumbnail cnt'）。每个（函数（）{
divs[''+$（this.index（）+'']=$（this.data（'num'）；
divs.push（$（this.text（））；
});
分段拼接（0,1）；
$（“#更多项目”）。在（'click'，function（）上{
$（'.thumbnail cnt'）.hide（）；
var计数=0；
$（divs）。每个（函数（k，v）{
如果（计数=4）
返回false；
$（'.thumbnail cnt[data num=“'+v+'”]）.show（）；
divs.push（divs.shift（））；
计数++；
});
});
.cnt缩略图{
显示：无；
}
.可见{
显示：块；
}

测试1
测试2
测试3
测试4
测试5
测试6
测试7
测试8
测试9
更多信息
请检查此代码

HTML

<div id="container">
<div class="thumbnail-cnt" data-num="1">1
</div>
<div class="thumbnail-cnt" data-num="2">2
</div>
<div class="thumbnail-cnt" data-num="3">3
</div>
<div class="thumbnail-cnt" data-num="4">4
</div>
<div class="thumbnail-cnt" data-num="5">5
</div>
<div class="thumbnail-cnt" data-num="6">6
</div>
</div>
<button id="more-projects" > Next
</button>

请参阅
应
$（'[data num=“”+）.join（''”]，[data id=“”）+']）
不应
$（'[data num=“”+）.join（'”]，[data num=“”）+“]）
看起来您只需要
变量偏移量=0最重要的是JS。然后单击：
projects.slice（0+偏移，4+偏移）；偏移量+=4非常感谢您的回复。我正在努力解决的主要问题是使数组成为一个永恒的循环，并每次存储起始索引。当代码被执行时，第1、2、3、4节将显示起始编号为5，当再次执行时，将显示第5、6、1、2节，此处起始编号为3，再次执行，第3、4、5、6节，起始编号为1。
<div id="container">
<div class="thumbnail-cnt" data-num="1">1
</div>
<div class="thumbnail-cnt" data-num="2">2
</div>
<div class="thumbnail-cnt" data-num="3">3
</div>
<div class="thumbnail-cnt" data-num="4">4
</div>
<div class="thumbnail-cnt" data-num="5">5
</div>
<div class="thumbnail-cnt" data-num="6">6
</div>
</div>
<button id="more-projects" > Next
</button>

$(document).ready(function(){
   var divQueue = [];

   $("#container div").each(function(){
        divQueue.push($(this));
   });

   function showDivs(){
     $("#container").html('');
     $(".thumbnail-cnt").css("display","none");
     var i=0;
     while(i<4){
        var temp = divQueue[0];
        $("#container").append(temp[0]);
        divQueue.shift();
        divQueue.push(temp);
        i++; 
     }
   }

   showDivs();

   $("#more-projects").click(function(){
   showDivs();
   });
});

.thumbnail-cnt {
    height : 30px;
    width : 25px;
}

#more-projects {
  width : 100px;
  height : 50px;
}