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

Question

我觉得这应该很简单，但我倾向于想太多的事情。我只想向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>

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

Answer 1

我能想到的一种方法是：

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

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

Answer 2

下面是一些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));
}

Answer 3

您可以使用querySelector (只是为了教那些仍在使用jQuery的人)来查询DOM elements。

然后，您可以使用Array.forEach遍历该列表，并使用$node.classList.add附加一个类名。

仅出于示例的目的：

​

window.onload = function onload () {
  document.getElementById('btn-add').addEventListener('click', add, true);
  document.getElementById('btn-remove').addEventListener('click', remove, true);
  
}

function add(e) {
  updateFocus(e.target);

  const list = document.querySelectorAll('.container-1');
  list.forEach((item, i) => item.classList.add(`newClass-${i}`));
}

function remove(e) {
  updateFocus(e.target);
  
  const list = document.querySelectorAll('.container-1');
  list.forEach((item, i) => item.classList.remove(`newClass-${i}`));
}

function updateFocus(el){
  document.querySelectorAll('.active').forEach((i) => i.classList.remove('active'));
  el.classList.add('active');
}

.scroller {
  height: 100%;
  width: 100%;
}

div[class*="container"] {
  display: inline-block;
  border: 1px solid blue;
  width: 20px;
  height: 20px;
  margin: 2px;
}

div[class*="newClass-"] {
  border: 1px solid yellow;
}

.active {
  border: 3px solid red;
  font-weight: bold;
}

<div class="scroller">
    <div class="container-1"></div>
    <div class="container-1"></div>
    <div class="container-2"></div>
    <div class="container-1"></div>
    <div class="container-2"></div>
</div>
<button id="btn-add">add newClass-* to container-1</button>
<button id="btn-remove">remove newClass-* to container-1</button>

​

否则，它只有一行代码。

document.querySelectorAll('.container-1');
  .forEach((item, i) => item.classList.add(`newClass-${i}`));