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

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你需要使用：

 // 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'); }

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

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-09 07:06:09

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-09 07:06:09

解决方案1
0 已采纳 2018-04-09 07:06:09