Javascript 如何向未指定数量的元素添加类

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

例如：

---

正如标题所说，金额可以是随机的。因此，它需要读取并应用于滚动条中的所有container-1。

下面是一些js，它们通过类名container-1获取所有元素。在for循环中，它会将带有计数器标记的类newClass添加到该类的每个元素中

var elements = document.getElementsByClassName("container-1");
for(var i = 0; i < elements.length; i++){
    elements[i].classList.add("newClass" + (i+1));
}

您可以使用querySelector来教仍然使用jQuery的人查询DOM元素

然后可以使用Array.forEach在列表上迭代，并使用$node.classList.add追加类名

仅出于本示例的目的：

window.onload=函数onload{ document.getElementById'btn-add'。addEventListener'click'，add，true； getElementById'btn-remove'。addEventListener'click'，remove，true； } 函数加法器{ updateFocuse.target； const list=document.queryselectoral'.container-1'； list.forEachitem，i=>item.classList.add`newClass-${i}`； } 功能删除{ updateFocuse.target； const list=document.queryselectoral'.container-1'； list.forEachitem，i=>item.classList.remove`newClass-${i}`； } 函数updateFocusel{ document.queryselectoral.active.forEachi=>i.classList.remove'active'； el.classList.add'active'； } .卷轴{ 身高：100%； 宽度：100%； } div[类别*=容器]{ 显示：内联块； 边框：1px纯蓝色； 宽度：20px； 高度：20px； 保证金：2倍； } div[class*=newClass-]{ 边框：1px纯黄色； } .主动{ 边框：3倍纯红； 字体大小：粗体； } 将newClass-*添加到容器-1

---

remove newClass-*to container-1您可以使用document.getElementsByClassName和spread运算符创建一个包含类名为“container-1”的所有元素的数组。。。。此处使用Spread运算符是因为getElementsByClassName返回HTMLCollection。因此，为了使用forEach轻松地对其进行迭代，我们需要将其转换为数组。转换后，我们可以对其进行迭代，并将newClass添加到每个元素中。为了获得要添加到每个newClass末尾的数字，我们使用forEach的第二个参数，它是当前元素的索引

const containerOneDivs = [...document.getElementsByClassName('container-1')];
containerOneDivs.forEach((div, i) => div.className += ` newClass${i+1}`);

---

我能想到的一个方法是：

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

---

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

因为每个帖子都很好，所以很难选择。我从每一个方面都学到了一些东西，所以谢谢你：我选择了我做的那个，因为我觉得它最好地回答了这个问题。尽管我最终还是用了每篇文章中的一点来满足我的需要。