How to add a class to multiple elements?

Question

Basically I like to add a new class to multiple elements with the same class name. Currently it adds a class only to the last one. I have tried using document.querySelectorAll but got no results. What I'm missing?

HTML example

<div class="model"></div>
<div class="model"></div>
<div class="model"></div>

JS

 _updateParagraph: function(settings, className) {
    var paragraph = document.querySelector('.' + className);
    paragraph.className = className;
    this._updateParagraphClasslist(settings, paragraph);
  },

FULL JS

App.Views.Preview = Backbone.View.extend({
  el: "#preview",
  initialize: function() {
    this.listenTo(this.model, "change", this.update);
  },
  update: function() {
    var

      layout = [this.model.get("model")],
      format   = [this.model.get("size"), this.model.get("color-outside"), this.model.get("color")],
      color    = [this.model.get("color-inside")],
      material = [this.model.get('material')],
      lamination = [this.model.get('lamination')],
      logo = [this.model.get('embossing')];

    this._updateParagraph(layout, 'layout');
    this._updateParagraph(format, 'front');
    this._updateParagraph(format, 'back');
    this._updateParagraph(lamination, 'kit-front');
    this._updateParagraph(lamination, 'kit-back');
    this._updateParagraph(logo, 'embossing');
    this._updateParagraph(color, 'colorinner');
    this._updateParagraph(color, 'model');


  },
  _updateParagraph: function(settings, className) {
    var paragraph = document.querySelector('.' + className);
    paragraph.className = className;
    this._updateParagraphClasslist(settings, paragraph);
  },
  _updateParagraphClasslist: function(settings, paragraph) {
    _.each(settings, function(setting) {
      if (_.has(setting, "visual")) {
        paragraph.classList.add(setting.visual);
      }
    });
  }
});

@AmeyDeshpande jsfiddle.net/infous/8woaegx2 it's maybe a clear example of the code you want. Check results in DOM. — starikovs
– starikovs, Commented Sep 15, 2015 at 13:33

starikovs · Accepted Answer · 2015-09-15 13:09:06Z

36

I like to add a new class to multiple elements with the same class name

Using jQuery, you can target all element with class model along with .addClass() for adding class to all of them:

$('.model').addClass('newclass')

A pure javascript solution can be like following:

var divs = document.querySelectorAll('.model');
for (var i = 0; i < divs.length; i++) {
    divs[i].classList.add('newclass');
}

edited Sep 15, 2015 at 13:09

starikovs

3,4084 gold badges33 silver badges36 bronze badges

answered Sep 15, 2015 at 12:53

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user405398 Over a year ago

Not me. Maybe he is looking for pure js version.

Jai Over a year ago

@CrimsonChin where is it?

Jon Wells Over a year ago

@Jai sadly it would require a time machine to prove, the user has since removed the tag.

Lewis Over a year ago

Thank you for the raw js verion of this.... Rarely anybody provides raw js solutions... ;) +1.

connexo · Accepted Answer · 2022-02-28 10:24:01Z

5

In 2022 (with IE out of the equation), you would do this (using querySelectorAll, forEach, and an arrow function):

document.querySelectorAll('.foo').forEach(el=>el.classList.add('bar'));

edited Feb 28, 2022 at 10:24

answered Feb 28, 2022 at 10:17

connexo

57.2k15 gold badges112 silver badges149 bronze badges

1 Comment

Kinglybird Over a year ago

One liner neat solution.

SuperPommeDeTerre · Accepted Answer · 2022-02-28 10:13:45Z

0

Sorry for coming late, but I was thinking that using getElementsByClassName is probably more efficient :

var myDivs = document.getElementsByClassName('model');
[].forEach.call(myDivs, function(mySingleDiv) {
    mySingleDiv.classList.add('newclass');
});

answered Feb 28, 2022 at 10:13

SuperPommeDeTerre

11 bronze badge

Collectives™ on Stack Overflow

How to add a class to multiple elements?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related