ClassList.add() 对于具有相同类名的多个 div - 否 jQuery

Question

我有很多 div 具有相同的 className (.example)。我正在尝试使用 vanilla JavaScript 将类添加到它们每个人的 classList 中，并成功地做到了，但仅针对第一个 div 拥有目标 className，使用如下代码所示：

<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() 对于具有相同类名的多个 div - 否 jQuery

ClassList.add() for multiple divs with same className - No jQuery

html

javascript

jscript