JQuery Find #ID, RemoveClass and AddClass

Question

Hi Guys,

I have the following HTML

<div id="testID" class="test1">
        <img id="testID2" class="test2" alt="" src="some-image.gif" />
    </div>

I basically want to get to #testID2 and replace .test2 class with .test3 class ?

I tried

jQuery('#testID2').find('.test2').replaceWith('.test3');

But this doesn't appear to work ?

Any ideas ?

Answer 1

try that

$('#testID').addClass('nameOfClass');

or

$('#testID').removeClass('nameOfClass');

Answer 2

$('#testID2').addClass('test3').removeClass('test2');

jQuery addClass API reference

Answer 3

jQuery('#testID2').find('.test2').replaceWith('.test3');

Semantically, you are selecting the element with the ID testID2, then you are looking for any children with the class test2 (does not exist) and then you are replacing that element with another element that does not exist.

You need to do this:

jQuery('#testID2').addClass('test3').removeClass('test2');

This selects the element with the ID testID2, then adds the class test3 to it. Last, it removes the class test2 from that element.

Answer 4

.....

$("#testID #testID2").removeClass("test2").addClass("test3");

Because you have assigned an id to img too, you can simply do this too:

$("#testID2").removeClass("test2").addClass("test3");

And finally, you can do this too:

$("#testID img").removeClass("test2").addClass("test3");