How to get the class of the clicked element?

Admin 1
Viewed 685851

I can't figure it out how to get the class value of the clicked element.

When I use the code bellow, I get "node-205" every time.

jQuery:

.find('> ul')
.tabs(
{
    selectedClass: 'active',
    select: function (event, ui) {
        //shows only the first element of list
        $(this).children('li').attr('class');
    },
    cookie: { expires: 0 },
    fx: fx
})

HTML:

<ul class="tabs">
  <li class="node-205"></li>
  <li class="node-150"></li>
  <li class="node-160"></li>
</ul>
jquery
6 Answers

Here's a quick jQuery example that adds a click event to each "li" tag, and then retrieves the class attribute for the clicked element.

$("li").click(function() {
   var myClass = $(this).attr("class");
   alert(myClass);
});

Equally, you don't have to wrap the object in jQuery:

$("li").click(function() {
   var myClass = this.className;
   alert(myClass);
});

And in newer browsers you can get the full list of class names:

$("li").click(function() {
   var myClasses = this.classList;
   alert(myClasses.length + " " + myClasses[0]);
});

You can emulate classList in older browsers using myClass.split(/\s+/);

user_755250 
$("li").click(function(){
    alert($(this).attr("class"));
});
user_5485850
user_590710

All the solutions provided force you to know the element you will click beforehand. If you want to get the class from any element clicked you can use: 

$(document).on('click', function(e) {
    clicked_id = e.target.id;
    clicked_class = $('#' + e.target.id).attr('class');
    // do stuff with ids and classes 
    })
user_16395940
Related