-2

I have a website with a few sections that look as following:

...
    <div class="row docutils">
        ...
    </div>
...

I would like to use javascript to add a custom css class to them so they looks like this:

...
    <div class="row docutils my-class">
        ...
    </div>
...

I have tried adding a js file in the same directory and added a script reference, however this approach didn't have any effect:

$(document).ready(function () {
   var testarray = document.getElementsByClassName("row docutils");
   for(var i = 0; i < testarray.length; i++)
   {
       testarray[i].className += "my-class";
   }
});

Is there a better way to solve this problem?

Yes
  • 339
  • 3
  • 19
  • `testarray[i].className += "my-class";` won't leave a space between the end of the previous class and the one you're adding. Add a space: `testarray[i].className += " my-class";` or use `classList`: `testarray[i].classList.add("my-class");` or, since you seem to be using jQuery: `$(".row.docutils").addClass("my-class");`. – T.J. Crowder Aug 25 '21 at 14:48
  • 1
    Does this answer your question? [How to add a class to a given element?](https://stackoverflow.com/questions/507138/how-to-add-a-class-to-a-given-element) – Philll_t Aug 25 '21 at 14:53
  • It seems odd to mix different set of api that do the same stuff, ie jQuery (the `$(document).ready(`) and old style vanilla (`document.getElementsByClassName` and `testarray[i].className += "my-class";`). I would rater decide a consistent set for all the DOM related stuff, or at least if I use use jQuery then I use it everywhere otherwise i do not use it at all – asdru Aug 25 '21 at 15:13

4 Answers4

0

You have to prepend a space, since classes are delimited by a space.

var testarray = document.getElementsByClassName("row docutils");
for (var i = 0; i < testarray.length; i++) {
  testarray[i].className += " my-class";
}
.my-class {
  background-color: red;
}
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>

Although you should be using classList.add instead:

var testarray = document.getElementsByClassName("row docutils");
for (var i = 0; i < testarray.length; i++) {
  testarray[i].classList.add("my-class");
}
.my-class {
  background-color: red;
}
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>

If you want to do it with jQuery:

$('.row.docutils').addClass('my-class');
.my-class {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
<div class="row docutils">
  ...
</div>
Spectric
  • 30,714
  • 6
  • 20
  • 43
0

this is a one expression pure vanilla answer

Array.from(document.querySelectorAll('.row.docutils')).forEach(
    current => current.classList.add('my-class')
)

In most browser you don't even need to cast the NodeList returned from Element.prototype.querySelectorAll to an array, so you can remove the Array.from(...) part, resulting in

document.querySelectorAll('.row.docutils').forEach(
    current => current.classList.add('my-class')
)
asdru
  • 1,147
  • 10
  • 19
0

Since you're already using jQuery target the elements with those classes, and use addClass.

$('.row.docutils').addClass('red');
.red { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row docutils">One</div>
<div class="row">Two</div>
<div class="row docutils">Three</div>
Andy
  • 61,948
  • 13
  • 68
  • 95
0

Try this.

    $(document).ready(function () {
      var testarray =  document.querySelectorAll(".row.docutils");
      for(let i = 0; i < testarray.length; i++){
         testarray[i].classList.add("my-class");
    }
 });
KalemMentore868
  • 29
  • 5