javascript get class name

Question

Assume there are three classes

<div class="hello world_1"></div>
<div class="hello world_2"></div>
<div class="hello world_3"></div>

I want to get the class name "world_1","world_2" and "world_3" based on "hello". The code:

$('.hello').each(function(){
  this.attr('class');
});

got error saying:

TypeError: Object #<HTMLDivElement> has no method 'attr'

I experimented a little bit and found

$('.hello:first').attr('class')

works while

$('.hello')[0].attr('class')

raises the above error.

Could anyone explain why it happened and how can I get what I want?

Thanks

alex · Accepted Answer · 2012-11-02 07:30:33Z

8

You need to wrap the this, like so...

$('.hello').each(function(){
  $(this).attr('class');
});

jQuery provides this as a reference to a native DOM element. To able to call jQuery methods on it, wrap it with the jQuery constructor.

If you want to match class of pattern world_n, you could use...

var matches = $(this).attr('class').match(/(?:^|\s)world_\d+(?:\s|$)/);

edited Nov 2, 2012 at 7:30

answered Nov 2, 2012 at 6:09

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Engineer Over a year ago

@alex Can you elaborate, why /(?:^|\s)world_\d+(?:^|\$)/ (which doesn't work at all ) and not simple /world_\d+/ ?

alex Over a year ago

@Engineer That's a massive fail on my behalf. I'll fix it.

Engineer Over a year ago

@alex I just want to know, why do you need that "complicated stuff" ?

alex Over a year ago

@Engineer It depends. You may have another class with world_ in it that you don't want to match.

Mayank K. Swami · Accepted Answer · 2012-11-02 06:09:56Z

1

try

$('.hello').each(function(){
  $(this).attr('class');
});

answered Nov 2, 2012 at 6:09

Mayank K. Swami

57.3k23 gold badges130 silver badges148 bronze badges

Comments

Clark Pan · Accepted Answer · 2012-11-02 06:11:46Z

1

Whats happening is that the jquery each function sets the this to be the DOM element, and doesn't 'prewrap' the jquery wrapper around this element.

So like alex has said, simply wrapping it again will give you want you want.

answered Nov 2, 2012 at 6:11

Clark Pan

6,0271 gold badge24 silver badges19 bronze badges

Comments

kayen · Accepted Answer · 2012-11-02 06:14:27Z

0

To get only the world_class names, you'll need to do a string replace and remove whitespaces using $.trim:

$('.hello').each(function(){
  $.trim($(this).attr('class').replace('hello', ''));
});

answered Nov 2, 2012 at 6:14

kayen

4,8683 gold badges21 silver badges20 bronze badges

Collectives™ on Stack Overflow

javascript get class name

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related