jQuery获取孩子并给他们数字答案

【问题标题】：jQuery get children and give them numbersjQuery获取孩子并给他们数字
【发布时间】：2017-06-26 11:54:50
【问题描述】：

我需要一个 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>

容器内的div是自动生成的。

Element 的子元素应该有这个 css 属性：

First child: animation-delay: 1s;

Second child: animation-delay: 2s;

Third child: animation-delay: 3s;

...

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

【问题讨论】：

“所以我需要一个 jQuery 解决方案” .... 告诉我们你的尝试。 Stackoverflow 不是免费的代码编写服务。这里的目标是帮助修复你的代码而不是为你做你的工作和研究
真的不需要 Javascript 或 jQuery。这不是nth:child，而是:nth-child(n)（请参阅下面的答案，添加颜色以使其可见）。

标签： javascript jquery html css children

【解决方案1】：

真的，这不需要 Javascript 或 jQuery。不是nth:child，而是:nth-child(n)：

.container > :nth-child(1) {
  animation-delay: 1s;
  color: red;
}
.container > :nth-child(2) {
  animation-delay: 2s;
  color: blue;
}
.container > :nth-child(3) {
  animation-delay: 3s;
  color: green;
}
.container > :nth-child(4) {
  animation-delay: 4s;
  color: brown;
}

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

【讨论】：

HTML 代码已生成，因此在我看来，为每个animation-delay 编写 4 行几乎相同的代码并不是一个好的选择。想象一下 SO 将生成 30.000 个 div。那么你有 120.000 行 css 代码。
这是一个有效的观点。在这种情况下，最好用 Javascript 解决问题（我仍然不会在这里使用 jQuery）。如果只是一些div，那么应用纯基于 CSS 的解决方案显然更好，而且在性能方面也是如此。此外，请考虑将新 div 动态添加到容器中的情况。您每次都必须重新运行 jQuery。

【解决方案2】：

这增加了想要的 css 属性：

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

小提琴：https://jsfiddle.net/wxhrks0x/

或者用 css less 来做（不用 jQuery）：

@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);

【讨论】：

请记住，这将影响.container 内的所有div，而不仅仅是直接子div。如果它必须是 jQuery（在这种情况下完全没有必要，那么使用 .container > .autogenerated-div 作为选择器是安全的。
这是每个程序员的责任。给定的代码可以访问所示的元素。
给定的代码有 8 个子元素，所以如果这就是你的论证的基础，你为什么要批评 CSS 方法？另外，我不是说你错过容器，我是说你也在自动生成的 div 中点击子 div。

【解决方案3】：

适用于第 n 个孩子

div.autogenerated-div:nth-child(1) {
  width: 20px;
  height: 10px;
  background-color: red;
  animation: newcolor 1s ease;
  animation-delay: 1s;
}

div.autogenerated-div:nth-child(2) {
  width: 20px;
  height: 10px;
  background-color: blue;
  animation: newcolor 1s ease;
  animation-delay: 2s;
}

div.autogenerated-div:nth-child(3) {
  width: 20px;
  height: 10px;
  background-color: green;
  animation: newcolor 1s ease;
  animation-delay: 3s;
}

@keyframes newcolor {
  to {
    background-color: black;
  }
}

<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>

【讨论】：