0

I need to add a class to bulk of <a> tag. I have to select the a tag using querySelectorAll method, and all elements are selected. But when I trying to add a class to them it won't added.

I have try the following example.

var qc=document.querySelectorAll(".Label ul li a");
qc.className+="newcls";

https://jsfiddle.net/ahhvovvv/

But I can add it through jQuery, but don't use jQuery.
The working jQuery code is

$(document).ready(function(){

   $(".Label ul li a").addClass("newcls");

});

Merbin Joe
  • 611
  • 6
  • 27
  • 2
    `qc` is a collection. You need to iterate over it and add the classname to each collection element. jQuery does that automatically for you. – Andy Apr 09 '16 at 20:32
  • 1
    Also, qc[i].classList.add("newcls") might work better for you. See: [MDN classList](https://developer.mozilla.org/en/docs/Web/API/Element/classList) – Yogi Apr 09 '16 at 20:37
  • 2
    `[].forEach.call(qc, el => el.classList.add('newCls'));` – Emissary Apr 09 '16 at 20:39

3 Answers3

3

I'd suggest:

// converts the collection of elements returned from
// document.querySelectorAll() into an Array, using
// Array.from(), then iterates over that Array using
// Array.prototype.forEach():
Array.from( document.querySelectorAll(".Label ul li a") ).forEach(

  // using arrow function syntax to perform the same
  // action on each <a> ('aElement') within the
  // array; here using Element.classList API to
  // add the given class-name:
  aElement => aElement.classList.add('newClass')
);
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • In DOM4, NodeLists are iterable, so you can use `forEach` directly without `Array.from`. See [forEach method of Node.childNodes](http://stackoverflow.com/q/36108712/1529630). But there is not much browser support yet. – Oriol Apr 09 '16 at 20:43
  • up vote with reference: [MDN Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from). – Yogi Apr 09 '16 at 20:45
2

You have to iterate through the Collection, one way could be:

var qc = document.querySelectorAll(".Label ul li a");
[].forEach.call(qc, function(item) {
    item.className+=" newcls";
})

Fiddle updated

Remember to add a space before the class if you'll use className, since you are editing the whole class, otherwise you could use 

item.classList.add('newcls');
Lionel T
  • 1,559
  • 1
  • 13
  • 30
  • up vote as I think using [].forEach.call is a safer solution than using Array.from. – Yogi Apr 09 '16 at 20:49
  • 1
    It's an easy solution, however there are some [highlighted problems](https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/) by Todd Motto, interesting to keep in mind when work in a big codebase. However I think is also a good practice to use `classList` instead of `className`. – Lionel T Apr 09 '16 at 20:55
1

In your code qc is collection. You should iterate through it. And className is not a collection it is a string where class names separated with space. So here is your code fixed

var qc=document.querySelectorAll(".Label ul li a");
for(var i=0; i<qc.length; i++) {
    qc.classList.add("newcls");
    //replace with next line if you need this working in IE before version 10 
    //qc.item(i).className+=" newcls";
}
Nick Rassadin
  • 860
  • 7
  • 7
  • 2
    [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/q/500504/1529630) NodeLists may have enumerable properties like [`item`](https://www.w3.org/TR/dom/#dom-nodelist-item), which you don't want to iterate. – Oriol Apr 09 '16 at 20:39
  • Yep, it is NodeList, but not in array. There's nothing criminal in `for .. in`, and by the best is to use `for .. of` – Nick Rassadin Apr 09 '16 at 20:45