Javascript 如何循环浏览div

我希望我的页面一次显示3个div，当我单击next时，我希望它显示接下来的3个div。然后，当我单击“上一步”时，我想显示前3步

$("#container .result").slice(0, 3).show();

   $("#right").click(function () {

       var items = $('#container .result:visible').hide().last();

       var nextItems = items.nextAll().slice(0, 3);

       if (nextItems.length === 0) {
           nextItems = $("#container .result").slice(0, 3);
       }

       nextItems.show();
   });
   $("#left").click(function () {

       var items = $('#container .result:visible').hide().last();

       var nextItems = items.prevAll().slice(0, 3);

       if (nextItems.length === 0) {
           nextItems = $("#container .result").slice(0, 3);
       }

       nextItems.show();
   });

---

问题是，当我单击“上一步”时，它显示最后3个div，当我再次单击时，它显示2个div，而不是1个div。我怎样才能解决这个问题？我希望它在第一个3时停止。

基本上，您可以执行以下操作。 在下一次或上一次单击设置容器的左边距，以定位或循环所有div

$（文档）.ready（函数（）{
$（'next button'）。在（'click'，function（）上{
if（parseInt（$（'.carousel item'）.css（“左边距”）.slice（0，-2））<-2000）{
$（'.carousel项'）。动画({
“左边距”：“0px”
}, 200)
}否则{
$（'.carousel项'）。动画({
“左边距”：“-=600px”
}, 200);
}
});
$（'.prev按钮'）。在（'click'，function（）上{
if（parseInt（$（'.carousel item'）.css（“左边距”）.slice（0，-2））>0）{
$（'.carousel项'）。动画({
“左边距”：“-2000px”
}, 200)
}否则{
$（'.carousel项'）。动画({
“左边距”：“+=600px”
}, 200);
}
});
});
.carousel容器{
高度：500px；
显示器：flex；
利润率：40px 20px；
位置：相对位置；
溢出：隐藏；
宽度：720px；
填充：0；
边框：1px纯红；
对齐项目：居中；
}
.传送带项目{
身高：100%；
保证金：5px；
左边距：60像素；
填充：0；
-moz盒方向：水平；
-ms盒方向：水平；
-webkit盒方向：水平；
-o形盒方向：水平；
盒子方向：水平；
显示器：-moz盒；
显示：-ms框；
显示：-网络工具包盒；
显示器：-o形盒；
显示：框；
列表样式类型：无；
}
.项目{
边框：实心1px#333；
右边距：10px；
宽度：200px；
显示器：flex；
对齐项目：居中；
}
.项目>a{
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：柔性端；
}
.prev按钮，
.下一个按钮{
边框：1px纯绿色；
背景颜色：灰色；
}
.导航{
宽度：60px；
保证金：0；
位置：绝对位置；
排名：0；
底部：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.下一步按钮：悬停，
.prev按钮：悬停{
背景色：红色；
}
.导航：活动{
颜色：白色；
}
.下一个按钮{
右：0；
}
.prev按钮{
左：0；
}
/*.旋转木马项目li：第n个孩子（1）{
背景图像：url（'http://urbanphenomena.net/imgs/cover/bq2.jpg');
背景尺寸：封面；
}*/












运行co
确定，因此，您的第一个错误是，当尝试回写3时，您从3项中的第一项而不是最后一项中获取了前3项。所以我把.last（）改为.first（）。然后，要在previous=0时返回，您所做的只是从当前3进行切片，而不是在整个元素数组的末尾进行切片

这里有一个指向代码笔的链接，该代码笔具有工作代码（显然，您必须更改变量以适合您的项目）：

已更改
var items=$（'#container.result:visible'）.hide（）.last（）
to
var items=$（'#container.result:visible'）.hide（）.first（）

及

到

这也只适用于数字元素是每次跳过的数字的倍数的情况，但我可以修复这一点，如果您愿意
您的思路非常正确，您的代码的独创性给我留下了深刻的印象

您的主要问题通过一个非常简单的修复得到解决；在
#左侧
单击处理程序，将
.last（）
替换为
.first（）
：

要在单击前3个上一个时循环到最后3个，请将此行更改为下一行：

nextItems = $("#container .result").slice(0, 3);

nextItems = $("#container .result").slice($("#container .result").length-3, $("#container .result").length);


但是我认为现在或将来可能会出现这种情况，
.result
s的数量不是很多
3
，比如说
7
或
11
。

我创建了一个脚本来处理这个问题，并在两个方向上循环：

$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
  var start=0, step=3;
  var currentItems = $("#container .result:visible").hide();
  var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
  var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());

  if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
    var itemsLength = $("#container .result").length;
    if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
    nextItems = $("#container .result").slice(start,step); //loop around
  } else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
    if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
    currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
  } else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
  nextItems.show(); //show the next set
}).click(); //initialize divs at pageload

html，正文{宽度：98%；高度：90%；}
#容器{宽度：100%；高度：90%；背景：浅灰色；}
#结果{显示：无；浮动：左；宽度：30%；高度：100%；边距：0 1.66%；背景：浅绿色；}
#container.result>div{display:table；宽度：100%；高度：100%；}
#container.result>div>div{display:表格单元格；宽度：100%；高度：100%；文本对齐：居中；垂直对齐：中间；字体：粗体2em无衬线；}
.nav{页边距顶部：2%；光标：指针；}

1.
2.
3.
4.
5.
6.
7.
以前的
下一步
或再次循环，例如我有9个div，当最后一个3时，单击“上一步”显示最后一个3。您可能需要一个变量来跟踪当前位置。您的代码总是获取前3项，而不是相对于您在集合中的当前位置的3项。我如何才能做到这一点？对不起，我不是jquery方面的专家@格伦费里
点击下一步，显示下三个div
？您的代码片段显示下一个div，但不显示下一个3。请更新您的代码。科尔比。。谢谢你的代码笔示例！我已经找了两天这样的解决方案了。
var items = $('#container .result:visible').hide().first();

nextItems = $("#container .result").slice(0, 3);

nextItems = $("#container .result").slice($("#container .result").length-3, $("#container .result").length);

$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
  var start=0, step=3;
  var currentItems = $("#container .result:visible").hide();
  var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
  var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());

  if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
    var itemsLength = $("#container .result").length;
    if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
    nextItems = $("#container .result").slice(start,step); //loop around
  } else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
    if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
    currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
  } else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
  nextItems.show(); //show the next set
}).click(); //initialize divs at pageload