一个接一个地改变多个div的颜色

我有一个问题一个一个地改变一些div的颜色。 在页面加载我创建一个div，其中填充了一个15×15 div的正方形（class =’feld’）

我想改变的所有div都有类feld

我的代码到目前为止：

$(document).ready(function() { create(); var delay = 1; function create(){ for (z = 1; z < 16; z++) { var zeile = jQuery('
', { class: 'zeile', id: z, html: "" }); $("#wortfeld").append(zeile); for (s = 1; s < 16; s++) { var div = jQuery('
', { class: 'feld', id: s, html: "" }); $(".zeile[id=" + z + "]").append(div); }; }; }; $('.feld').each(function(){ $(this).delay((delay++)*500).css("background-color","lightgoldenrodyellow"); }); }); 

所以我的目的是逐个改变每个.feld的颜色。 但它不能像我接近这个那样工作。 我也试过这样做：

  create(function(){ $('.feld').each(function(){ $(this).delay((delay++)*500).css("background-color","lightgoldenrodyellow"); }); }); 

也不起作用

这是HTML

           
 
TEST
 
   

Answer 1

首先，一个不相关的问题，但可能会导致问题：你不应该多次使用一个ID，给你的zeile和zeile项目唯一的ID。 您还可以使用setTimeout获得一些里程，无需涉及.delay：

 $(document).ready(function() { create(); var delay = 1; function create(){ for (z = 1; z < 16; z++) { var zeile = jQuery('
', { class: 'zeile', id: 'z'+z, html: "" }); $("#wortfeld").append(zeile); for (s = 1; s < 16; s++) { var div = jQuery('
', { class: 'feld', id: 'z'+z+'s'+s, html: "" }); $("#z" + z).append(div); }; }; }; $('.feld').each(function(){ setTimeout(function(x){ $(x).css("background-color","lightgoldenrodyellow"); },(delay++)*500,this); }); }); 

小提琴

Answer 2

 .delay(duration).css({}) 

这不会在持续时间之后应用css，而是立即应用。

你需要使用.queue ，就像在这个例子中一样 ：

 $('.feld').each(function(){ $(this).delay((delay++)*500).queue(function(next){ $(this).css("background-color","lightgoldenrodyellow"); next(); }); });