Toggling classes in jquery when a condition is met

Question

I have a bit of code written in JavaScript that changes the CSS class when a condition is met...

The problem with this (and many other bits of JavaScript for my site) is that i need to start writing them in JQuery instead.

The reason i am having to re write this one is because Internet Explorer is ignoring classList.add & classList.remove

I am starting to read up on JQuery but until then would one of you kind people be able to convert the following code to JQuery.

I wont show you how far i have got because its a mess :)

JAVASCRIPT CODE:

var animate = document.getElementsByClassName('nowPlayNoAnimate');

for (var i = 0; i < animate.length; i++) {
    if (animate[i].parentNode.offsetWidth < animate[i].offsetWidth) {
       animate[i].classList.add("nowPlayAnimate");                  
       }
    else animate[i].classList.remove("nowPlayAnimate");
    }

Thank you for your time!

Answer 1

toggleClass with a switch will do that :

$('.nowPlayNoAnimate').each(function() {
  $(this).toggleClass('nowPlayAnimate', $(this).parent().width() < $(this).width());
});