Javascript jQuery获取子对象并给它们编号

我需要一个jQuery函数，它应该为div的子元素提供不同的css属性

<div class="container">
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
  <div class="autogenerated-div"></div>
</div>

---

我已经通过css使用了nth:child，但它不起作用，所以我需要一个jQuery解决方案。

这增加了想要的css属性：

$( ".container>div.autogenerated-div" ).each(function( index ) {
  $(this).css("animation-delay",(index+1)+"s");
});

小提琴：

或者使用较少的css（不使用jQuery）：

---

实际上，这不需要Javascript或jQuery。它不是第n个孩子，而是第n个孩子（n）：

.container>：第n个子项（1）{
动画延迟：1s；
颜色：红色；
}
.container>：第n个子项（2）{
动画延迟：2s；
颜色：蓝色；
}
.container>：第n个子项（3）{
动画延迟：3s；
颜色：绿色；
}
.container>：第n个子项（4）{
动画延迟：4s；
颜色：棕色；
}

哦
哦
哦
哦
哦
哦
哦
哦

适用于第n个孩子

div.autogenerated-div:n个子项（1）{
宽度：20px；
高度：10px；
背景色：红色；
动画：newcolor 1s轻松；
动画延迟：1s；
}
div.autogenerated-div:n个子项（2）{
宽度：20px；
高度：10px；
背景颜色：蓝色；
动画：newcolor 1s轻松；
动画延迟：2s；
}
div.autogenerated-div:n个子项（3）{
宽度：20px；
高度：10px；
背景颜色：绿色；
动画：newcolor 1s轻松；
动画延迟：3s；
}
@关键帧newcolor{
到{
背景色：黑色；
}
}

“所以我需要一个jQuery解决方案”。。。。让我们看看你试过什么。Stackoverflow不是免费的代码编写服务。这里的目标是帮助修复您的代码，而不是为您自己做工作和研究。实际上，这不需要Javascript或jQuery。它不是

nth:child

，而是

：nth child（n）

（请参阅下面的答案，添加颜色以使其可见）。请记住，这将影响

容器内的所有
div
，而不仅仅是直接的child
div
。如果必须是jQuery（在这种情况下，这是完全不必要的，使用
.container>.autogenerated div
作为选择器是安全的。这是每个程序员的责任。给定的代码可以访问如图所示的元素。给定的代码有8个子元素，因此如果这是您的论证所基于的，您为什么要批评它将CSS方法化？另外，我不是说你错过了容器，我是说你还命中了自动生成的div中的子div。HTML代码是生成的，所以在我看来，为每个
动画延迟
编写4行几乎相同的代码不是一个好的选择。想象一下so将生成30000个div。那么你就有了120000个l这是一个有效的观点。在这种情况下，最好用Javascript解决这个问题（我仍然不会在这里使用jQuery）如果仅仅是一些<代码> div <代码>，应用一个纯粹的基于CSS的解决方案显然更好，也可以是明智的。同时，考虑新div将动态地添加到容器中的SITUAUT。每次都必须重新运行jQuery。
$( ".container>div.autogenerated-div" ).each(function( index ) {
  $(this).css("animation-delay",(index+1)+"s");
});

@iterations: 8;
.autogenerated-div-loop (@i) when (@i > 0) {
  .autogenerated-div-@{i} {
    animation-delay: ~"@{i}%"s;
  }
  .autogenerated-div-loop(@i - 1);
}
.autogenerated-div-loop (@iterations);