jQueryは子を取得して番号を与えます

Question

私はdivの異なる要素の子要素に与えるべきjQuery関数が必要です。

<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が自動的に生成されます。

要素の子供たちは、このCSS属性を持っている必要があります。

First child: animation-delay: 1s; 

Second child: animation-delay: 2s; 

Third child: animation-delay: 3s; 

...

I'veはn番目でそれを試してみました：CSSを経由して、子供が、それはので、私はjQueryのソリューションを必要とする仕事のdidnt 。

Answer 1

これは希望のCSS属性を追加します。

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

フィドル：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

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>