242

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

When I use the code below, 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>
2
  • your question is rather unclear... are you using any jquery plugin?
    – jrharshath
    Jun 8, 2009 at 10:03
  • If it's a clicked item, shouldn't you be using the click() function to bind the event and get the class ? Maybe I didn't understand fully the question...
    – Bite code
    Jun 8, 2009 at 10:08

6 Answers 6

421

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+/);

4
  • 1
    "class" is not a valid variable name. Oct 20, 2009 at 9:17
  • 1
    One of those funny situations where jQuery is the long way. this.className will give you the same as $(this).attr("class") Sep 2, 2013 at 23:25
  • what if the element has more than one class name?
    – Dharman
    Oct 5, 2013 at 17:52
  • 1
    Not sure why but the 2nd example can't retrieve the class name for me. However, the 1st example works great! Thanks! Helped me a ton. :) Apr 25, 2018 at 15:32
39
$("li").click(function(){
    alert($(this).attr("class"));
});
32

I saw this question so I thought I might expand on it a little more. This is an expansion of the idea that @SteveFenton had. Instead of binding a click event to each li element, it would be more efficient to delegate the events from the ul down.

For jQuery 1.7 and higher

$("ul.tabs").on('click', 'li', function(e) {
   alert($(this).attr("class"));
});

Documentation: .on()

For jQuery 1.4.2 - 1.7

$("ul.tabs").delegate('li', 'click', function(e) {
   alert($(this).attr("class"));
});

Documentation: .delegate()

As a last resort for jQuery 1.3 - 1.4

$("ul.tabs").children('li').live('click', function(e) {
   alert($(this).attr("class"));
});

or

$("ul.tabs > li").live('click', function(e) {
   alert($(this).attr("class"));
});

Documentation: .live()

18

This should do the trick:

...
select: function(event, ui){ 
   ui.tab.attr('class');
} ,
...

For more info about the ui.tab see http://jqueryui.com/demos/tabs/#Events

2
  • What does this mean? Could you explain that more?
    – apfel007
    Jul 10, 2009 at 18:13
  • It's ui.tab instead of ui.item you need to use. I thought it was ui.item. Jul 13, 2009 at 8:41
15

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 
    })
1
  • 2
    It should be noted that if getting an id is unreliable, one can always use $(e.target) instead of $('#' + e.target.id) and jQuery will still handle this case reasonably.
    – BobChao87
    Aug 17, 2018 at 17:00
9
$("div").click(function() {
  var txtClass = $(this).attr("class");
  console.log("Class Name : "+txtClass);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.