jQuery get clicked classname

Question

Possible Duplicate:
Get Class List for Element with jQuery

If I have something like this, I can get the id of the clicked selector by doing this.

$('#one, #two, #three').click(function(){
    alert(this.id)
})

My question is if I have classes instead of id's, how do i get the classname of the clicked selector.

$('.one, .two, .three').click(function(){
    // ??????
})

EDIT:

The clicked elements may have multiple classes, and I wish to isolate the class that was used to initially select the element.

score 15 · Accepted Answer · 2012-02-02T21:29:36.647

15

You'd use the native .className property.

this.className

It's this.className instead of this.class because class is a reserved word in JavaScript, and some browsers haven't allowed reserved words to be used as property names.

It sounds like there could be multiple classes on an element. To isolate one, you can use $.grep with $.inArray.

var classes = ['one','two','three'];

$('.' + classes.join(',.')).click(function(){
    var classNames = this.className.split(/\s+/);
    var cls = $.grep(classNames, function(c, i) {
        return $.inArray(c, classes) !== -1;
    })[0];
    alert(cls);
});

DEMO: http://jsfiddle.net/rFT8j/

Or you could use $.each instead of $.grep.

var classes = ['one','two','three'];

$('.' + classes.join(',.')).click(function(){
    var classNames = this.className.split(/\s+/);
    var cls;
    $.each(classNames, function(i, c) {
        if( $.inArray(c, classes) !== -1 ) {
            cls = c;
            return false;
        }
    });
    alert(cls);
});

DEMO: http://jsfiddle.net/rFT8j/1/

If you want something a little simpler, one solution would be to take advantage of closures, and assign separate handlers that each reference a different name in the variable scope...

var classes = ['one','two','three'];

$.each(classes, function(i, c) {
    $('.' + c).click(function(){
        alert(c);
    });
});

DEMO: http://jsfiddle.net/rFT8j/3/

edited Feb 02 '12 at 21:29

answered Feb 02 '12 at 20:47

this className will not work if the selector have multiple classes 'like
' All the classes of the element will be picked up
– Pinkie Feb 02 '12 at 20:49
1

@Pinkie: `this.className.split(/\s+/);`. – gen_Eric Feb 02 '12 at 20:49
How is split going to help. If i clicked on this '
' i will get `two whatever something`. I want 'two' be be alerted and not the other classes that are not in the selector
– Pinkie Feb 02 '12 at 20:52
1

@Pinkie: You asked *"how do i get the classname of the clicked selector"*. If you're asking how to isolate a specific class out of multiple, you need to ask that. – Feb 02 '12 at 20:52
@Pinkie: It sounds like you're asking what selector was matched, not the class(es) on the element. – gen_Eric Feb 02 '12 at 20:53
Yes rocket exactly. I want the class of the clicked selector and not anything else outside that – Pinkie Feb 02 '12 at 20:54
@Pinkie: I just updated with a solution that builds the initial selector from an Array of classes, then uses that same array along with `$.grep` and `$.inArray` to isolate the clicked one. – Feb 02 '12 at 20:56
Thanks. This works great. I guess there is no simpler way to do this. – Pinkie Feb 02 '12 at 21:22
@Pinkie: Aside from assigning separate handlers, not really. You're ultimately searching for one of a set in another set, so there'll be some complexity. If you want a little more simplicity, you could assign a property or attribute to the element that has only that class, or you could assign separate handlers in a loop each of which will close over a different class name. I'll give an update with that last solution. – Feb 02 '12 at 21:26

samccone · Answer 2 · 2012-02-02T20:53:09.673

5

$('.one, .two, .three').click(function(e){
    console.log($(e.currentTarget).attr('class'))
})

edited Feb 02 '12 at 20:53

answered Feb 02 '12 at 20:46

samccone

10,746
7
43
50

/facepalm I just wrote a bunch of stuff this morning that checked with `$(...).attr('class');` Thank you! – asawyer Feb 02 '12 at 20:48
1

`class` is not a jquery method. You mean `attr("class")`. – benekastah Feb 02 '12 at 20:51

score 5 · Answer 3 · answered Feb 02 '12 at 20:47

5

Just use JQuery's .attr to get the attribute class value

alert($(this).attr("class"));

answered Feb 02 '12 at 20:47

Henesnarfel

2,129
1
16
18

Just note that elements can have multiple classes (separated by spaces). – gen_Eric Feb 02 '12 at 20:48
@Rocket true. Then I would see Tim Bolton's suggestion for doing this at [http://stackoverflow.com/a/1227309/992437](http://stackoverflow.com/a/1227309/992437) – Henesnarfel Feb 02 '12 at 20:52
This will not work. It outputs all classes of the element and not just the clicked class that is defined in the selector. – Pinkie Feb 02 '12 at 20:58

score 0 · Answer 4 · answered Feb 02 '12 at 20:48

0

The following two methods should work:

$('#one, #two, #three').click(function(){
    alert(this.className)
})

$('#one, #two, #three').click(function(){
    alert($(this).attr("class"))
})

answered Feb 02 '12 at 20:48

benekastah

5,651
1
35
50

jQuery get clicked classname

4 Answers4