Search code examples
jquerychaining

Do jquery function really chain?

I have been told that jquery functions can be chained to each other.

So I was wondering if this code:

if (cDiv.hasClass('step-dark-left'))
    cDiv.removeClass('step-dark-left').addClass('step-light-left');

Could be changed by removing the if like so:

cDiv.removeClass('step-dark-left').addClass('step-light-left');

So, if .removeClass fails, then .addClass wont execute?

Solution

  • removeClass() will not fail if the element doesn't expose the step-dark-left class. It will just do nothing and return the jQuery object, therefore addClass() will always be called.

    So, you'll have to keep your if statement around, unless you can work the class check in the jQuery selector itself. For instance, if your <div> element has its id attribute set to cDiv:

    $("#cDiv.step-dark-left").removeClass("step-dark-left")
                         .addClass("step-light-left");

    That way, the jQuery object will be empty if the element doesn't expose the step-dark-left class to begin with, so both removeClass() and addClass() will end up doing nothing in that case.