cambiando el color de múltiples divs uno tras otro

Tengo un problema cambiando el color de algunos divs uno por uno. en la carga de la página, creo un div que se llena con un cuadrado de 15×15 divs (clase = ‘feld’)

Todos los divs que quiero cambiar tienen el campo de clase

Mi código hasta ahora:

$(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"); }); });

Entonces mi intención era cambiar el color de cada .feld uno por uno. Pero no funciona de la forma en que me acerqué a esto. También traté de hacerlo de esta manera:

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

tampoco funciona

aquí está el HTML

           
TEST

En primer lugar, un problema no relacionado pero que podría causar problemas: no debe usar una identificación más de una vez, otorgue a sus elementos de zeile y feld identificadores únicos. También puedes obtener un poco de kilometraje con setTimeout, sin necesidad de involucrar a .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); }); });

violín

 .delay(duration).css({}) 

Esto no aplica el CSS después de la duración, sino inmediatamente.

Necesitas usar .queue , como en este ejemplo :

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