Javascript将类附加到现有类

Question

我在使用classList实现Query Selector All方法时遇到问题。基本上，我想要做的是将类.purple添加到fridge类的所有实例中。但是，它一直告诉我它无法添加到undefined。

下面的代码片段有希望说明我想要实现的目标。

＆＃13;

＆＃13;

document.querySelectorAll('.fridge').classList.add('purple');

＆＃13;

.purple {color: purple;}

＆＃13;

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>

＆＃13;

＆＃13;

＆＃13;

编辑：我正在寻找一个简单的JavaScript解决方案。

Answer 1

您需要将NodeList从querySelectorAll转换为数组并循环遍历它：

Array.prototype.slice.call(document.querySelectorAll('.fridge')).forEach(function (fridge) {
  fridge.classList.add('purple');
});

.purple {
  color: purple;
}

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>

如果您能够使用ES6，可以稍微缩短一下：

[...document.querySelectorAll('.fridge')].forEach((fridge) => {
  fridge.classList.add('purple');
});

.purple {
  color: purple;
}

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>

Answer 2

这是非常容易阅读的代码

＆＃13;

＆＃13;

var items = document.querySelectorAll('.fridge');
for (var x = items.length - 1; x >= 0; x--){
    items[x].classList.add('purple');
}

＆＃13;

.purple {color: purple;}

＆＃13;

<div class="fridge">Stuff</div>
<div class="fridge">Moar Stuff</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Vanilla Js，试试

var a = document.getElementsByClassName('fridge');
    for(i=0; i < a.length - 1; i++){
        a[i].classList.add('purple');
    };