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