CODEWITHSUNDEEP
javascriptjquery
Nicholas
Nicholas

Reputation: 299

Loop through divs and toggle class if another class exists

I want to toggle a class (and make the text blink using an interval) if another class is found.

CSS

.flash {
    color: #DC4900;
}

HTML

<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text">Don't Flash</div>

JS

$(document).ready(function() {
  $('.text').each(function() {
    if ($(this).hasClass('notify')) {
      setInterval(function() {
        $(this).toggleClass('flash');
      }, 1000);
    }
  });
});

https://jsfiddle.net/s9dv9qv3/

The interval is not working like it should. It should be adding the flash class to the text if the class notify is found.

Upvotes: 1

Views: 271

Answers (4)

Efiresites
Efiresites

Reputation: 41

Hey I had the same problem, a have a list of divs all with .d-unit class, some I would set to available others would be pending or sold.

so this function will highlight all the d.units that also have the class of available. If yes then it will add or a remove the 'available-green' class which is how I change the highlight color.

*watch to see if you need period or not when putting in a class name.

function unitd() {
$(".unitd").toggleClass('filter-on');

$('.d-unit.available').each(function() {
    var self = this;
    if($(self).hasClass('available')) {

        $(self).toggleClass( "available-green' );
    }
    
})

}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 240968

Inside of the setInterval callback, this refers to the window object.

To work around this, one option is to capture a reference to this outside of the callback:

Example Here

$('.text.notify').each(function() {
  var self = this;

  setInterval(function() {
    $(self).toggleClass('flash');
  }, 1000);
});

I also removed the check for the notify class since you can just select those elements directly.

Alternatively, you could also just use the .bind() method to set the value of this:

Example Here

$('.text.notify').each(function() {
  setInterval(function() {
    $(this).toggleClass('flash');
  }.bind(this), 1000);
});

As a side note, since you're toggling the class on all of the elements at the same time, you could just use:

setInterval(function() {
  $('.text.notify').toggleClass('flash');
}, 1000);

If you want to set a delay, you could add a timeout based on the current index of the .each() loop:

Example Here

$('.text.notify').each(function(i) {
  var self = this;

  setTimeout(function() {
    setInterval(function() {
      $(self).toggleClass('flash');
    }, 1000);
  }, 1000 * i);
});

Lastly, you can avoid jQuery completely and use an infinite CSS3 animation:

.text.notify {
  animation: flash 2s infinite;
}
@keyframes flash {
  0%, 49% {
    color: #000;
  }
  50%, 100% {
    color: #DC4900;
  }
}
<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text notify">Flash</div>
<div class="text">Don't Flash</div>

Upvotes: 2

The Alpha
The Alpha

Reputation: 146201

You can do it using following code and css3 easily:

$( document ).ready(function() {
    $('.text.notify').toggleClass('flash');
});

Css3:

.flash {
    color: #DC4900;
    animation: flasher 1s linear 2;
}

@keyframes flasher {  
    50% { opacity: 0.0; }
}

Check the fiddle here.

Upvotes: 1

JBA
JBA

Reputation: 2899

Do this instead:

$( document ).ready(function() {

  setInterval(function() {
    $('.text').each(function(){
      if($(this).hasClass('notify')) {
          $(this).toggleClass('flash');
      }
    });
  }, 1000);
});

Upvotes: 0

Related Questions