Javascript追加类超过现有类

Question

我遇到了一个问题实现查询选择器所有方法与classList。基本上，我想要做的是将类.purple添加到fridge类的所有实例。但是，它一直告诉我，它不能添加到未定义。

下面的代码片段有望说明我正在尝试完成什么。

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

.purple {color: purple;}

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

编辑：我在寻找一个简单的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

这是非常容易阅读的代码

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

.purple {color: purple;}

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

Answer 3

香草JS，尝试

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