循环结束后重启jQuery.each()

时间:2013-08-30 15:22:58

标签: javascript jquery html each

我有值数组,我想将这些值设置为输入的占位符。

如何使用jQuery.each() 来实现这一目标,因为我解决了this solution的问题,而且效果很好。

我尝试这样做以重新启动它,但它不起作用:

if(index==arr.length) index=0;

HTML code:

 Values : <input name='input' id='input' />

JS / jQuery代码:

var arr = new Array();
for (var i = 0; i <= 5; i++) {
    arr.push('Value ' + i);//fill array with values
}

function eachChange(){
   var x=0;
   $.each(arr, function (index, value) {
       x++;
   setTimeout(function(){ 
       $('input').attr('placeholder', value);
      }, x * 1000); 
       if(index==arr.length) index=0;

 });   

}
eachChange();//call function

小提琴: http://jsfiddle.net/charaf11/5ZQgX/

3 个答案:

答案 0 :(得分:1)

您可以将索引与arr.length进行比较,如下所示

var arr = new Array();
for (var i = 0; i <= 5; i++) {
    arr.push('Value ' + i);//fill array with values
}

function eachChange(){
$.each(arr, function (index, value) {
setTimeout(function(){ 
   $('input').attr('placeholder', value);
   //if it is the last element in arr setTimeout and call eachChange() 
   if(index>=arr.length-1){
        setTimeout(function(){  
           eachChange();     
        },1000);
   }

  }, index * 1000); 
});   

}
eachChange();     

http://jsfiddle.net/R274P/1/

答案 1 :(得分:1)

尝试以这种方式重新启动.each()循环有两个问题。首先,这不是.each()真正起作用的方式。它不是一个循环,而是在每个元素上调用函数的简写。如果您给匿名函数一个名称(让我们使用setPlaceholder()),.each()调用基本上是这样做的:

setPlaceholder(0, arr[0]);
setPlaceholder(1, arr[1]);
setPlaceholder(2, arr[2]);
setPlaceholder(3, arr[3]);
setPlaceholder(4, arr[4]);
setPlaceholder(5, arr[5]);

它传递给函数的索引值不用于循环,因此尝试将其设置为0不会对.each()调用产生任何影响。

第二个问题是你的条件。它永远不会真正触发,因为.each()调用的最后“迭代”将arr.length - 1作为其值,而不是arr.length

我不确定你为什么要让它继续循环,但如果这是你的目标,你可以这样做:

function eachChange(){
    $.each(arr, function (index, value) {
        setTimeout(function() {
            $('input').attr('placeholder', value);
        }, index * 1000);
        if (index == arr.length - 1) {
            setTimeout(eachChange, (index + 1) * 1000);
        }
    });   

}
eachChange();//call function

应该做的是在最后一次占位符更新发生后1秒钟再次调用eachChange()。您可以添加一些其他检查来限制它的递归次数,但是如果您希望它无限期地发生,则应该这样做。

Here's an updated fiddle demonstrating it.

答案 2 :(得分:0)

我认为你不能重置$ .each函数的计数器,因为它似乎封装了一个简单的for循环。你无法从外面进入柜台。

但是,请尝试:

function eachChange(initX){
   var x = initX || 0;
   $.each(arr, function (index, value) {
       x++;
       setTimeout(function(){ 
          $('input').attr('placeholder', value);
       }, x * 1000); 

       // Call yourself but pass current x
       if(index==arr.length) eachChange(x); 

   });   
}

如果要重置x,请删除initX部分,但我假设您希望它继续计算上一个循环完成的位置。