I'm trying by clicking on a button to toggle a class on a parent element which is 5 levels higher, so I though that this would do the trick:

$('.btn-list').click(function() {
    $(this).parents('.mix-serie').toggleClass('animate')
});

But unfortunately it didn't, but if I just add a class,

$('.btn-list').click(function() {
    $(this).parents('.mix-serie').addClass('animate')
});

it does!

Then I thought doing it with .toggle() instead of .click()like this:

$('.btn-list').toggle(function() {
    $(this).parents('.mix-serie').addClass('animate')
}, function() {
    $(this).parents('.mix-serie').removeClass('animate')
});

But again no luck! So what's going on?

I'm on Google on the Mac and I have no errors in the console re this (there's 1, but is related to something else and is IE specific).

I replicated the situaion in a pen and there it toggles the class on the parent, so there's a conflict with something else on my page.

I took the function out of the document ready function and now it toggles the class properly.

Kudos to myself... do I also get rewarded by solving my own questions? :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.