Replacing all occurrences of one class name with another with jQuery

Question

Say I have a UL with the ID of "menu". If I wanted to find all the list items of that menu that have a class of "foo", remove the "foo" class and add the class "bar", how would I do this with jQuery? Here's what I've got so far. My syntax is a bit off.

$('#menu').children().hasClass('foo').removeClass('foo').addClass('bar');

Also, if the list item didn't already have the "foo" class, then I don't want it to have the "bar" class, either.

Answer 1

Just select all the items you want with the selector query:

$("#menu > .foo").removeClass("foo").addClass("bar");

#menu > .foo selects all direct children of #menu that have class .foo.

Answer 2

.hasClass() returns a boolean value

$('#menu > .foo').removeClass('foo').addClass('bar');

or try

$('#menu > .foo').toggleClass('foo bar');