How to find the class of clicked element using jQuery ?

Last Updated : 18 Jan, 2021

In this article, we will find the class of the clicked element using jQuery. To find the class of clicked element, we use this.className property. The className property is used to set or return the value of an element’s class attribute. Using this property, the user can change the class of an element to the desired class.

Approach:

Here, we use this.className property to get the class name of the current div element. Here, we have added five div elements with different class name and then use jQuery this.className property to get the clicked div elements class name and display it on the console.

Syntax:

$("div").click(function () {
    var getClass = this.className;
    console.log(getClass);
});

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        How to find the class of the  
        clicked element using jquery? 
    </title> 
  
    <!-- Import jQuery cdn library -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $("div").click(function () { 
                var getClass = this.className; 
                console.log(getClass); 
            }); 
        }); 
    </script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to find the class of the  
        clicked element using jquery? 
    </h3> 
  
    <div class="main">Main Div</div> 
    <div class="GFG">GFG</div> 
    <div class="Geeks">Geeks</div> 
    <div class="G4G">GeeksforGeeks</div> 
    <div class="welcome">Welcome</div> 
</body> 
  
</html>