Lukas Baliƫnas Lukas Baliƫnas - 1 year ago 80
HTML Question

Changing innerHTML when multiple elements have a specific class removed

I have 10 elements with multiple classes. 5 of them have classes

, 5 of them have
. With jQuery when an event happens i toggle the class
for a specific element. I want to check when these 10 elements don't have the class
, so that i can change the innerHTML of an element.

My method for checking this:

$(document).ready(function () {
var ready = false;

$(".home").each(function (i) {
if ($(this).hasClass(".not-added")) {
ready = false;
else {
ready = true;
if (ready) {
document.getElementById("button1").innerHTML = "Points";

This doesn't work. When the page is loaded,
has already
inside of it.

Sample of my elements:

before event:

<div class='dropdown-toggle stat-dropdown not-added home' data-toggle='dropdown'>

after event:

<div class='dropdown-toggle stat-dropdown home' data-toggle='dropdown'>

What could be the problem?

Answer Source

You need to specify the class name in .hasClass(). In your case: use .hasClass('not-added) instead of the wrong .hasClass('.not-added'). Here is a working JSFiddle with your use case.

Note that it would be better to use a for loop instead of .each(), because you can utilize the conditional to check for your flag (ready in your case), to avoid iterating through all of the elements.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download