Jquery .each延迟问题

Question

我正在尝试使用 JavaScript 做一些事情并尝试一些问题。

这是我的 Html 代码：

<div class="views-row"></div>
<div class="views-row"></div>
<div class="views-row"></div>
<div class="views-row"></div>

在 JavaScript 中，我尝试延迟向每个 div 添加一个 class，但我无法做到这一点。这是我的 JS

$('.views-row').each(function(){
            $(this).addClass("test").delay(1000);
});

不知道怎么回事，有人知道吗？

感谢您的帮助 ;)

Answer 1

jQuery的delay()主要是动画，用setTimeout代替

$('.views-row').each(function(index, elem){
    setTimeout(function() {
        $(elem).addClass("test");
    }, index * 1000);
});

FIDDLE

Answer 2

将 setTimeout 与 .each 的 index 参数一起使用。 .bind() 会将 this 值传递给目标函数。

试试这个：

$('.views-row').each(function(index) {
  setTimeout(function() {
    $(this).addClass("test");
  }.bind(this), index * 1000);
});

.test {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="views-row">Test</div>
<div class="views-row">Test</div>
<div class="views-row">Test</div>
<div class="views-row">Test</div>

Fiddle here

Jquery .each延迟问题

Jquery .each delay issue

html

javascript

each

jquery

delay