Question

我有一个包含10个元素的数组，在页面加载时有5个div，每个都将从此数组中获取一个值，然后使用setInterval() div的值将每隔1秒更新一次数组元素。

问题是我只想使用一个foreach循环 并且值从＃8开始更新而不是从＃6更新，并且最后两个div不会更新。

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  first = data.slice(0, 5),
  second = data.slice(5),
  count = 0;

//update first 5 on page load
$.each($('.wrap'), function(i) {
  $(this).find('.title').html(first[i]);
});

$('#container .wrap:first').addClass('current');

//it does not work with `.wrap`
$.each($('#container'), function() {
  (function($set) {
    var interv = setInterval(function() {
      count++;
      var $cur = $set.find('.current');
      $cur.removeClass('current');

      $cur.find('.title').html(second[count]);
      var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
      $next.addClass('current');
      if(count == 4)
        clearInterval(interv);
    }, 1000);
  })($(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
  <div class="wrap"><div class="title"></div></div>
</div>

Answer 1

您可以稍微简化一下代码。你真的需要将阵列拼接两次吗？将变量用于拆分索引并使用它会不会更好？另外，代替setInterval使用setTimeout。

以下是一个例子：

小提琴：http://jsfiddle.net/abhitalks/90h7045b/42/

<强> 段：

＆＃13;

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    $wrap = $(".wrap"), 
    split = 5;

$wrap.each(function (idx) {
    var self = $(this), 
        elem = idx + split,
        timer = ((idx+1) * 1000);
    
    $(this).find('.title').html(data[idx]);
    setTimeout(function () {
        self.find('.title').html(data[elem]);
    }, timer);
});

＆＃13;

body { text-align:center; }
.wrap {
    display: inline-block;
    background: #f3f3f3; color: #f8008c;
    padding: 5px; margin:5px; width: 64px; height:64px;
    line-height: 64px; border-radius:37px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
    <div class="wrap"><div class="title"></div></div>
</div>

＆＃13;

Answer 2

我相信你想要的是div在代码完成执行后显示6到10。我发现实现这一目标的简单解决方案是将计数变量设置为-2，因为您的代码在循环的后期开始更新。

将初始计数变量赋值更改为以下代码：

count = 0;

为：

count = -2;

JsFiddle示例：http://jsfiddle.net/larryjoelane/90h7045b/18/

循环遍历所有div并更新元素

2 个答案: