How do I change an elements class in jquery?

Question

Assuming I have

how can I change the value of verticalList using jquery?

Answer 1

Try a combination of addClass and removeClass

$(selector).removeClass('verticleList').addClass('newClass');

Also, did you mean: vertical

Answer 2

I thnik what you want to do is remove that class and change to another? see addClass and removeClass

$('.verticalList').addClass('foo').removeClass('verticalList') 

P.S. I've corrected spelling of 'vertical' in this version

Answer 3

There is no need to change the values of verticleLIst , you can add your required properties through

$('verticleList').css() , it will automatically overwrite the values.

Answer 4

There are several functions that you can use to manipulate an element class.

toggleClass adds a class on the element if it doesn't exists. If it exists then it's removed.

$(".myList").toggleClass("verticleList");

addClass insert the class on the element. If the class already exists it does nothing.

$(".myList").addClass("aClass");

removeClass remove the class from the element. If the class doesn't exists it does nothing.

$(".myList").removeClass("aClass");

hasClass returns true or false if the element has or not a class.

$(".myList").hasClass("aClass");

You can also change the class modifying the attribute (.attr) class which may not be recommended.

• See the example on jsFiddle.
• Reference of class functions on jQuery API.