Javascript/jQuery - How do I obtain name of the class of clicked element?

Question

I googled and googled and I concluded that it\'s very hard to get answer on my own.

I am trying to use jquery or JavaScript to get a property of clicked element. I c

Answer 1

In jQuery, if you attach a click event to all <div> tags (for example), you can get it's class like this:

Example: http://jsfiddle.net/wpNST/

$('div').click(function() {
    var theClass = this.className;  // "this" is the element clicked
    alert( theClass );
});

This uses jQuery's .click(fn) method to assign the handler, but access the className property directly from the DOM element that was clicked, which is represented by this.

There are jQuery methods that do this as well, like .attr().

Example: http://jsfiddle.net/wpNST/1/

$('div').click(function() {
    var theClass = $(this).attr('class');
    alert( theClass );
});

Here I wrapped the DOM element with a jQuery object so that it can use the methods made available by jQuery. The .attr() method here gets the class that was set.

Answer 2

This example will work on every element in the page. I'd recommend using console.log(event) and poking around at what it dumps into your console with Firebug/Developer tools.

jQuery

​$(window).click(function(e) {
    console.log(e); // then e.srcElement.className has the class
});​​​​

Javascript

window.onclick = function(e) {
    console.log(e); // then e.srcElement.className has the class
}​

Try it out

http://jsfiddle.net/M2Wvp/

Edit
For clarification, you don't have to log console for the e.srcElement.className to have the class, hopefully that doesn't confuse anyone. It's meant to show that within the function, that will have the class name.

Answer 3

$('#ele').click(function() {
    alert($(this).attr('class'));
});

And here are all of the attribute functions.

http://api.jquery.com/category/attributes/

Answer 4

You can use element.className.split(/\s+/); to get you an array of class names, remember elements can have more than one class.

Then you can iterate all of them and find the one you want.

window.onclick = function(e) {
    var classList = e.srcElement.className.split(/\s+/);
    for (i = 0; i < classList.length; i++) {
       if (classList[i] === 'someClass') {
         //do something
       }
    }
}

jQuery does not really help you here but if you must

$(document).click(function(){
    var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item==='someClass') {
           //do something
        }
    });
});

Answer 5

$(document).click(function(e){
    var clickElement = e.target;  // get the dom element clicked.
    var elementClassName = e.target.className;  // get the classname of the element clicked
});

this supports on clicking anywhere of the page. if the element you clicked doesn't have a class name, it will return null or empty string.

Answer 6

There's a way to do this without coding. Just open the console of your browser (f12?) and go to element you want. After that, hover or click the item you want to track.

Every change done on the DOM will be for a few seconds marked (or lightened) as another color on the console. (Watch the screen capture)

On the example, each time I hover a "colorItem", the 'div' parent and the "colorItem" class appears lightened. So in this case the clicked class will be 'swiper-model-watch' or 'swiper-container' (class of the lightened div)