Getting the class name of an element that was clicked

Question

I have a class in jQuery, I want to get the class of the element that has been clicked. (The element is in the same Class).

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {

$('.shikhar').click(function(){

   var decide=$(this).attr('class'); 
                  //here I want to know what was the class of the element that was clicked
   alert(decide);

   if(decide=='a'){
       $(this).find('.b').addClass("selected");
       $(this).find('.a').addClass("highlight");
   }else{
       $(this).find('.a').addClass("selected");
       $(this).find('.b').addClass("highlight");
   }

});



    });


</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>

<div class="shikhar">

    <div class="a">Superman</div>
    <div class="b">Hulk</div>

</div>


<div class="shikhar">

    <div class="a">Spiderman</div>
    <div class="b">Batman</div>

</div>

</body>
</html>

Heres a fiddle - http://jsfiddle.net/6QjN6/

your title says you want the class name, but your question says you want the id... which one is it? — pennstatephil, May 23 '14 at 15:28
If you want to get the ID, you must first put ID in elements. They don`t have ID. — LGVentura, May 23 '14 at 15:34

Smern · Answer 1 · 2014-05-23T15:59:45.647

Solution 1

Use e.target to get the element that where the event started.

JSFiddle

$('.shikhar').click(function (e) {
    var decide = $(e.target).attr('class');
    ...

Solution 2

You could also put the listener on the specific elements you expect the clicks to be on with a selector like .shikhar > div, then this would be what you were expecting. That would look like this:

JSFiddle

Note that if you use this selector, you will have to change your addClass() to be able to find the sibling:

   if(decide=='a'){
       $(this).parent().find('.b').addClass("selected");
       $(this).parent().find('.a').addClass("highlight");
   }else{
       $(this).parent().find('.a').addClass("selected");
       $(this).parent().find('.b').addClass("highlight");
   }

or

   if(decide=='a'){
       $(this).next('.b').addClass("selected");
       $(this).addClass("highlight");
   }else{
       $(this).prev('.a').addClass("selected");
       $(this).addClass("highlight");
   }

Suggestion

If the user can click multiple times, you might want to remove the "selected" and "highlight" classes so they don't end up with both classes at the same time.

Also, check if it has 'a' or 'b' for a class rather than if that is the only class. This will make sure it works even if other classes are added. Here is an updated version:

JSFiddle

$(document).ready(function () {

    $('.shikhar > div').click(function (e) {
        $this = $(this);
        $parent = $this.parent(); // just to prevent so much jquery object creation
        var decide;
        if ($this.hasClass('a')) {
            decide = 'a';
        } else if ($this.hasClass('b')) {
            decide = 'b';
        }
        console.log(decide);

        if (decide == 'a') {
            $parent.find('.b').removeClass("highlight").addClass("selected");
            $parent.find('.a').removeClass("selected").addClass("highlight");
        } else {
            $parent.find('.a').removeClass("highlight").addClass("selected");
            $parent.find('.b').removeClass("selected").addClass("highlight");
        }
    });
});

Thanks for the answer smerny :) I tried but this code is not working if(decide=='a'){ $(this).find('.b').addClass("selected"); $(this).find('.a').addClass("highlight"); }else{ $(this).find('.a').addClass("selected"); $(this).find('.b').addClass("highlight"); } — Shikhar_Bansal, May 23 '14 at 15:43
@Shikhar_Bansal, There are two different answers in my post. It looks like you used the second answer but did not update addclass part as I mentioned would be required. If you look at the JSFiddles, they both work as I believe you were expecting. — Smern, May 23 '14 at 15:47
@Shikhar_Bansal, I addressed some other problems with the code in my suggestion. With that, you can actually change the selection/highlight once they have been applied. — Smern, May 23 '14 at 16:00

score 1 · Answer 2 · answered May 23 '14 at 15:29

1

$('.shikhar div').click(function(e){
   e.preventDefault();
   var decide = this.className;
   alert(decide);

   if(decide=='a'){
       $(this).find('.b').addClass("selected");
       $(this).find('.a').addClass("highlight");
   }else{
       $(this).find('.a').addClass("selected");
       $(this).find('.b').addClass("highlight");
   }

});

And here is an updated JSFiddle

answered May 23 '14 at 15:29

APAD1

13,509
8
43
72

This wont add the classes as it wont be able to find an `.a` or `.b` within a `.shikhar div`. – Smern May 23 '14 at 15:41

score 0 · Accepted Answer · edited May 23 '14 at 15:54

0

You need to change your click handler to:

$('.shikhar div').click(function(){});

edited May 23 '14 at 15:54

Matthew Green

10,161
4
36
54

answered May 23 '14 at 15:29

SNAG

2,011
2
23
43

There are a couple issues this doesn't address, one of which it creates. – Smern May 23 '14 at 16:28

Getting the class name of an element that was clicked

3 Answers3

And here is an updated JSFiddle