addClass to getElementsByClassName array

Question

I need a little help as i am getting frustrated with .getElementsByClassName. I have an svg map that has paths with classes. I now need to list all with a certain class and add another class. Right now i have

var testarray = (document).getElementsByClassName("currentclass");
for(var i = 0; i < testarray.length; i++)
{
   testarray.item(i).className("classtobeadded");
}

This returns me a "undefined is not a function" error. I've tried $(document), (document), (jQuery), i've tried $(".currentclass").addClass(), i've tried lots of combinations without success. Can you guys tell what i am doing wrong?

Thank you!

Solution 1

You have a couple syntax errors, this should get it done:

var testarray = document.getElementsByClassName("currentclass");
for(var i = 0; i < testarray.length; i++)
{
    testarray[i].className += "classtobeadded";
}

Or since you're using jQuery you can do:

$(".currentclass").each(function() {
    $(this).addClass("classtobeadded");
});

Solution 2

This jQuery should also work

  $(".currentclass").addClass("classtobeadded");

Solution 3

You have some errors on your code

var testarray = (document).getElementsByClassName("currentclass");
for(var i = 0; i < testarray.length; i++)
   testarray.item(i).className += " classtobeadded";

You have to pay attention, you have to add a little space to add a new class like this

testarray.item(i).className += " classtobeadded";