Question

我有许多具有相同className（ .example ）的div。我正在尝试使用vanilla JavaScript将类添加到每个类的classList中，并成功执行此操作，但仅适用于拥有目标className的第一个div，如下所示：

<html>
 <body> 
  <div class="example">content</div>
  <div class="example">content</div>
  <div class="example">content</div>
 </body>
</html>


var example = document.querySelector('.example');

if (className = ('.example')){
  example.classList.add('margin');
}

这会做到以下几点：

<html>
 <body> 
  <div class="example margin">content</div>
  <div class="example">content</div>
  <div class="example">content</div>
 </body>
</html>

但是，我希望这样做：

<html>
 <body> 
  <div class="example margin">content</div>
  <div class="example margin">content</div>
  <div class="example margin">content</div>
 </body>
</html>

希望我已经为您提供了足够的信息，请提前感谢您！

Answer 1

您需要循环使用querySelectorAll()而非querySelector()来添加类，并且您需要使用if：

＆＃13;

// Select all the elements with example class.
var examples = document.querySelectorAll('.example');

// Loop through the elements.
for (var i = 0; i < examples.length; i++) {
  // Add the class margin to the individual elements.
  examples[i].classList.add('margin');
}

＆＃13;

<div class="example">content</div>
<div class="example">content</div>
<div class="example">content</div>

＆＃13;

上面的代码评论很好。如果您有任何问题，请告诉我。

ClassList.add（）用于具有相同className的多个div - 没有jQuery

1 个答案: