为包装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后需要等号。

Answer 2

我正在使用jquery。

假设您有这样的HTML：

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

您可以像这样为孩子添加课程：

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

示例：Jsfiddle

（您可以执行检查元素以检查是否已将hello添加到子类中）