add class does not work for multiple calls

[[email protected]…]

Hi jQuery team. First of all, i very much like the job that you are doing and please do keep on doing this. I have one question about addClass method when multiple called on the same element. If I use pure JS like this

<style type="text/css">

#test{width:400px;}

.blue{background-color:Blue;}

.red{background-color:Red;}

</style>

... document.getElementById('test').className = 'blue';

document.getElementById('test').className = 'red'; document.getElementById('test').className = 'blue'; document.getElementById('test').className = 'red'; document.getElementById('test').className = 'blue'; document.getElementById('test').className = 'blue'; document.getElementById('test').className = 'blue';

it works just fine. But when i use jQuery for the same call...

$('#test').addClass('blue'); $('#test').addClass('red'); $('#test').addClass('blue');

it does not affect the element with the new class. Can you please explain to me why is acting like this? Is this as it proper way of working or is it something else? Thank you in advance.

[Rick Waldron]

Can you distill this into a reduced test case on jsFiddle - thanks!

[anonymous]

​http://jsfiddle.net/BtkQW/

[Utkarsh]

Using .className sets the class attribute to the specified value. addClass only adds the class if it's not present. You should use a removeClass('red') before adding blue to the element.