Question

when I am using jQuery .attr(‘class’), I got back ‘class1 class2 class3’, they are supposed to be separate classes, how do I select one of the class, for example I want to change .css on class1, how would I iterate through the returned class names, are these a string that I have to split, or are these objects? Thanks!

BTW,
My html looks like this:

<td class ="class1 class2 class3">

I got it working by using .spilt on the returned .attr(‘class’). My goal is to get the second class, and do some .css() on it.

Answer 1

The class or className property returns a space separated list of class names in a single string. If you want to manually operate on that attribute, then you have to manually parse the string yourself into it’s resulting class names. It’s a string, not individual objects.

Now, fortunately when you’re using jQuery, you rarely have to do that yourself. If you want to add, remove or change a single class name, you can use some combination of these jQuery methods which will do all the parsing for you:

.hasClass(classname)
.replaceClass(oldName, newName)
.removeClass(classname)
.addClass(classname)

To remove one class and add a separate one, it’s not uncommon to chain two functions together like this.

x$.removeClass("foo").addClass("bar");

If you really just want the class name to be used in a selector, then you don’t have to worry about how many other class names there are on the object at all as the selector library built into jQuery will handle all that for you. For example:

$(".myClassName").css("color", "red");

will find all objects that have myClassName anywhere in the className property and will apply the specified CSS to those objects.