Menu
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);
}
});
}
});
578
Multiple HTML elements can share the same class.
HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page.
To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes, it only adds one or more class names to the class attribute.
We then used the classList.add method to add multiple classes to the element. If a class is already present on the element, it will be omitted. The add () method only adds classes that are not already contained in the element's class list.
jQuery addClass() Method jQuery HTML/CSS Methods. Example. ... The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes, it only adds one or more class names to the class attribute. Tip: To add more than one class, separate the class names with spaces.
Step 1) Add HTML: Add a class name to the div element with id="myDIV" (in this example we use a button to add the class). Example <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is a DIV element. </div> Step 2) Add CSS:
On each iteration, we used the classList.add method to add a class to the element. If the class is already present on the element, it won't get added twice. You can pass as many classes to the add () method as necessary. Similarly, if you need to remove one or more classes, you can use the remove () method.
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');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
