javascript - .attr('class') returns multiple class names, how to select the one I want to use? - Stack Overflow

admin管理员组

文章数量:1320617

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

Share Improve this question Follow edited Apr 27, 2012 at 1:25 sammiwei asked Apr 27, 2012 at 1:07 sammiweisammiwei 3,21099 gold badges4242 silver badges5353 bronze badges 2

• 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

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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.

本文标签：