jQuery 得到 children 并给他们数字

Question

我需要一个 jQuery 函数，它应该给出 children 个 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是自动生成的

元素的 children 应具有此 css 属性：

First child: animation-delay: 1s;

Second child: animation-delay: 2s;

Third child: animation-delay: 3s;

...

我已经通过 css 与 nth:child 进行了尝试，但它没有用，所以我需要一个 jQuery 解决方案。

Answer 1

这添加了想要的 css 属性：

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

Fiddle: https://jsfiddle.net/wxhrks0x/

或者少用 css（不用 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);

Answer 2

真的不需要 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>

Answer 3

适用于 nth-child

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>

jQuery 得到 children 并给他们数字

jQuery get children and give them numbers

html

javascript

css

jquery

children