jQuery - 延迟向数组内的元素添加类答案

【问题标题】：jQuery - Adding classes to elements inside array with delayjQuery - 延迟向数组内的元素添加类
【发布时间】：2012-08-01 14:48:35
【问题描述】：

我有一个数组，其中包含我页面中的一些元素。

现在我需要一个函数来遍历数组并向每个元素添加一个类bold。问题是一旦添加了类，就必须经过一段时间。然后bold 必须被移除并需要应用于下一个元素，从而产生“波浪”运动。

我试过这样做：

$.each(tdArr, function(i, v) {
  v.addClass("bold");
  setTimeout(function(){
    v.removeClass("bold");
  }, 900)
})

该代码的问题在于，bold 立即添加到所有元素中，并在 900 毫秒后被删除，同时又从所有元素中删除。

我必须怎么做才能在单独的操作之间添加延迟？

【问题讨论】：

标签： jquery arrays each

【解决方案1】：

我认为您需要稍微不同地处理这个问题，因为setTimout 会立即返回，它不会停止将下一个元素设置为粗体。

你可以用这样的方法来做到这一点：

function bold(i){
    if(i>0){
        $tdArr.eq(i-1).removeClass('bold');
    }
    if(i == $tdArr.length){
        return;
    }
    $tdArr.eq(i).addClass('bold')   

    setTimeout(function() { bold(i+1) },900);
}

然后调用它你只需要调用bold(0):

现场示例：http://jsfiddle.net/rJGjZ/

【讨论】：

【解决方案2】：

试试这个：

$.each(tdArr, function(index, element) {
  var $elem = $(element);
  $elem.addClass("bold");
  setTimeout(function(){
    $elem.removeClass("bold");
  }, 900)
})

第二个参数不是jQuery元素，你需要转换他

【讨论】：

【解决方案3】：

这样的东西对你有用吗？

function Bold(element) {
  $(element).addClass("bold"); // we bold the current tdArr
  setTimeout(function(){
    var nextSibling = $(element).next("td") // (if the tdArr are "td" tags) we find the next td brother of this one
    if (!!nextSibling) Bold(nextSibling); // if there is a brother, repeat the function on him after 900ms
  }, 900)
}

Bold(myfirsttd);

【讨论】：

因为你有一个 jQuery 选择器来获取你的元素，你可以应用一个类似的函数。只需更改选择器。它只需要第一个元素，然后找到兄弟姐妹

【解决方案4】：

在迭代数组时增加延迟，如果元素尚未包装，请确保将元素包装在 jQuery 中。如果是jQuery元素的集合，则使用each进行迭代。

var delay = 900

$els.each(function(){
  var $this = $(this)
  setTimeout(function(){
    $els.removeClass('bold')
    $this.addClass('bold')
  }, delay+=900)
})

否则，我会使用 for 并将元素包装在 jQuery 中。

for (var i=0, l=arr.length, d, prev; i<l; i++; d+=900) {
  prev = arr[i-1]
  setTimeout(function(){
    if (prev) $(prev).removeClass('bold')
    $(arr[i]).addClass('bold')
  }, d)
}

【讨论】：

这会起作用，除了超时内的$(this) 是指函数本身，而不是作为each 一部分的jQuery 对象。只需将以下内容放在setTimeout 上方：var $this = $(this); 并在里面使用$this。现场示例：jsfiddle.net/hUeK4