如何将类添加到未指定数量的元素

katsu 发表于 Dev

胜

我觉得这应该足够简单，但我倾向于过度思考。我只想为container-1元素添加新类。需要对类进行编号以区分它们。多种方法的奖励和详细解释，因为我想学习如何正确地做到这一点。

例子：

<div class="scroller">
    <div class="container-1 newClass1"></div>
    <div class="container-1 newClass2"></div>
    <div class="container-2"></div>
    <div class="container-1 newClass3"></div>
    <div class="container-2"></div>
</div>

正如标题所说，数量可以是随机的。因此，它需要读取和适用于所有container-1内scroller。

Myroidx

嗯，我能想到的一种方法是：

let selectedContainers = Array.from(document.querySelectorAll('.container-1'));
selectedContainers.map((container, i)=>{
  container.classList.add(`newClass${++i}`)
})

这里发生的事情是您选择了所有具有 container-1 类的 div 并从 NodeList 创建了一个数组。然后您通过数组进行映射以访问每个元素。使用模板字符串，您可以添加一个类名，其中一个动态变量是容器的索引。您可以使用其他变量并在之后增加它们，但我认为索引是最简单的解决方案。另外，我使用的原因++i是为了避免获得一个索引为零的类，例如newClass0

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。