jQuery得到孩子并给他们数字

Question

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

store.notifications.toJS()

自动生成容器内的div。

Element的子元素应具有此css属性：

toJS

...

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

Answer 1

真的，这不需要Javascript或jQuery。它不是// lib.d.ts declare module "lodash.tonumber" { function toNumber(value: any): number; export = toNumber; namespace toNumber { } } 而是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;
}

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

Answer 3

与nth-child

一起工作正常

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;