Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 can use "this.hash" for example - it returns hash value I presume.

Now I would like to get name of the class of clicked element. Is it even possible? How? And where would I find this kind of information?

  • jQuery documentation? - All I can find is methods and plugins, no properties.. if its there - please provide me with link.

  • JavaScript documentation? - is there even one comprehensive one? again please a link.

  • DOM documentation? - the one on W3C or where (link appreciated).

And what is this.hash? - DOM JavaScript or jQuery?

like image 801
zwolin Avatar asked Sep 23 '10 00:09

zwolin


People also ask

How do I get the class name from one element?

If you want only the first element in the DOM with that class, you can select the first element out of the array returned. var elements = document. getElementsByClassName('className'); var requiredElement = elements[0]; Else, if you really want to select only one element.

How do you get the ID of a clicked element by Javascript?

The buttonPressed() callback function will have a returned event object which has all the data about the HTML element that is clicked on. To get the clicked element, use target property on the event object. Use the id property on the event. target object to get an ID of the clicked element.

How do you check is a class is clicked in Javascript?

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

How do you check if an element has a specific class in jQuery?

jQuery hasClass() Method The hasClass() method checks if any of the selected elements have a specified class name. If ANY of the selected elements has the specified class name, this method will return "true".


2 Answers

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.

like image 128
user113716 Avatar answered Sep 24 '22 09:09

user113716


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.

like image 36
Robert Avatar answered Sep 22 '22 09:09

Robert