javascript - 向包装 div 内的每个 div 添加唯一的类

Question

我正在使用 twig 和 JavaScript 创建幻灯片，但我需要向包装 div 内的每个 div 添加一个唯一的 css 类。里面的div都是动态创建的，我无法编辑html。我希望用 twig 或 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

这是一个 JavaScript 解决方案(我对 Twig 一无所知)。这应该是相当不言自明的:

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

我添加了带有颜色的 c1-3 类，以便在您单击“运行代码片段”时可以查看一些内容，但显然您会执行自己的类。

注意:您的 html 中有一个拼写错误，您需要在 class 后面添加一个等号。