最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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.

Share Improve this question edited Apr 27, 2012 at 1:25 sammiwei asked Apr 27, 2012 at 1:07 sammiweisammiwei 3,2109 gold badges42 silver badges53 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

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.

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论