ラッピングdiv内の各divに一意のクラスを追加

Question

twigとJavaScriptを使用してスライドショーを作成していますが、ラップdivの各divに一意のCSSクラスを追加する必要があります。内部のdivはすべて動的に作成され、HTMLは編集できません。私は小枝やJavaScriptでこれを行うことを望んでいました。 何か助けていただければ幸いです。例えば

：

<div class="slider-wrapper"> 
<div>image</div> (These are the divs I need to add a unique css class to) 
<div>image</div> 
<div>image</div> 
</div> 

Answer 1

私はjqueryのを使用しています。

let children = $('.parent').children().addClass("hello"); 

例：あなたはこのようなあなたの子供たちにクラスを追加することができます

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

：

と仮定、次のようなHTMLましJsfiddle

を（あなたが行うことができます要素を調べて、子クラスにhelloが追加されていることを確認してください）

Answer 2

ここにはJavaScriptのソリューションがあります（私はTwigのことは知らない）。これはかなり自己説明する必要があります：私はちょうどあなたが「ファイル名を指定して実行コードスニペット」をクリックすると見て何かがあるような色を持つC1-3クラスを追加しました

// select divs that are children of the wrapper 
 
var divs = document.querySelectorAll(".slider-wrapper > div"); 
 

 
// loop over them 
 
for (var i = 0; i < divs.length; i++) { 
 
    // add the unique class using whatever class-naming system you prefer 
 
    divs[i].classList.add("c" + (i+1)); 
 
} 
 

.c1 { background-color: red; } 
 
.c2 { background-color: green; } 
 
.c3 { background-color: blue; }

<div class="slider-wrapper"> 
 
<div>image</div> 
 
<div>image</div> 
 
<div>image</div> 
 
</div>

、明らかにあなたは自分のクラスをやるでしょう。

注：あなたのhtmlには入力ミスがあります。classの後には等号が必要です。