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.

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.

• javascript
• jquery
• jquery-selectors

• What do you mean you want to change it? There's addClass & removeClass. – Brad Christie Commented Apr 27, 2012 at 1:10
• @sammiwei what you want to do? – Gabriel Santos Commented Apr 27, 2012 at 1:15

6 Answers 6

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 bination 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 unmon 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.

you can use jquery class methods (addClass, removeClass, hasClass, toggleClass) to manipulate classes

Use the class selector and have jQuery do the work for you:

$('td.class1').css();

Javascript

$(document).ready(function() {
    alert('Class 1 = ' + $('#test').attr("class").split(" ")[0]);
    alert('Class 2 = ' + $('#test').attr("class").split(" ")[1]);
    alert('Class 3 = ' + $('#test').attr("class").split(" ")[2]);
})

Html

<div id="test" class="class1 class2 class3"></div>

Live script: http://jsfiddle/7ZDP4/

$('td.class1').css('background','red');
$('td.class2').css('background','blue');

Edit, given an objeft, you can also use:

if ( $(this).hasClass('class1') ){ /* do this */  } else {  }

the way i found to be the easiest is to use the attr "href" as a seperate entity instead of using classes.

<td class="class1 class2" href="WhatYouWantToGrab" ></td>

Then in jQuery you would just do this

    $('.class1.class2').click(function() {
    var yourVariable = $(this).attr('href');

});

Hope this helps.