How to get the Class or ID of clicked HTML element in jQuery
In your HTML page, you may have multiple elements which are very similar but each unique in its own way. On clicking such elements, each is supposed to perform a different action based on its Class or Id value. In order to achieve this, your code should have a way of detecting the class name and/or the id of the element when it gets clicked (or if triggered by another event).
In this article, we will cover how to easily get the ID or Class of the clicked HTML element using jQuery.
We will split the tutorial into two parts: We will first cover how to get the Class, then cover how to get the ID.
How to get the Class of a clicked element using jQuery
There are two different methods that we can use:
- Using the
.classNamejQuery property - Using the
attr()function
1. Using the .className jQuery property
The .className property should be used together with either this or the event.target property.
//Example 1: using event.target property
$(document).on("click", function(event){
var clsname = event.target.className;
});
//Example 2: using this property
$(document).on("click", function(){
var clsname = this.className;
});
Example 1
Using the .className in combination with the event.target property on any HTML element on the page.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get Class of Clicked Element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 class="heading">This is the page heading</h1>
<p class="paragraph">This is a paragraph</p>
<button type="button" class="btn1">Button 1</button>
<button type="button" class="btn2">Button 2</button>
<button type="button" class="btn3">Button 3</button>
<script>
$(function(){
$(document).on("click", function(event){
alert(event.target.className);
});
});
</script>
</body>
</html>
The above jQuery code will be triggered on clicking on any element within the page. On clicking an element (eg heading, paragraph, or button) its class is alerted. You can as well assign it to a variable or do a certain task based on the value of the class.
It is okay to use a different value in the function(event) instead of "event". If you do so, then you should use that value to replace the "event" within event.target.className. Eg, if you use function(xyz), you should as well use xyz.target.className to get the class name.
In the above code, if you click on an element but it happens not to have a class value, it will still show the alert box, but without a value for the class.
Example 2
Using the .className in combination with this property for a specific type of HTML element on the page.
In order to execute the jQuery code to get the class name only if an element of a specific type is clicked, then you must change the line $(document).on("click", function(event){ in the above code to $("elementName").click(function(event){, where "elementName" specifies the name of the element eg h1, h2, button, p, etc. In the case of this example where we substitute "event.target" with "this", you won't need to have "event" (or anything) inside the function().
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get Class of Clicked Element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 class="heading">This is the page heading</h1>
<p class="paragraph">This is a paragraph</p>
<button type="button" class="btn1">Button 1</button>
<button type="button" class="btn2">Button 2</button>
<button type="button" class="btn3">Button 3</button>
<script>
$(function(){
$("button").click(function(){
alert(this.className);
});
});
</script>
</body>
</html>
In the above code, an alert box is shown with the class name only when a button is clicked. Each button having a unique class, clicking on each will show an alert box with the unique class for that button.
2. Using the attr() function
The attr() function is used to get the value of the specified attribute (eg. class, id, href, etc) in the clicked element. To get the class value, we use "this" property with the attr() function, where we pass "class" to the function.
This refers to the clicked element. Unlike in example the above, we use "this" as $(this) because attr() is a function unlike className above.
Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery Get Class of Clicked Element</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 class="heading">This is the page heading</h1>
<p class="paragraph">This is a paragraph</p>
<button type="button" class="btn1">Button 1</button>
<button type="button" class="btn2">Button 2</button>
<button type="button" class="btn3">Button 3</button>
<script>
$(function(){
$("button").click(function(){
alert($(this).attr("class"));
});
});
</script>
</body>
</html>
How to get the ID of a clicked element using jQuery
In a similar way to getting the class name as shown above using the different methods, we can get the value of the element ID attribute.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Getting the IDs of clicked HTML elements</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1 id="heading">This is the page heading</h1>
<p id="paragraph">This is a paragraph</p>
<button type="button" id="btn1">Button 1</button>
<button type="button" id="btn2">Button 2</button>
<button type="button" id="btn3">Button 3</button>
<script>
$(function(){
$(document).on("click", function(event){
alert(event.target.id);
});
});
</script>
</body>
</html>
Note: While for class we use the className property, in getting the IDs we use id and not "idName".
Example 2
Using this.id to get the ID value of the elements.
<!DOCTYPE html>
<html>
<head>
<title>Getting the IDs of clicked HTML elements</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>This is the page heading</h1>
<p>This is a paragraph</p>
<button type="button" id="btn1">Button 1</button>
<button type="button" id="btn2">Button 2</button>
<button type="button" id="btn3">Button 3</button>
<script>
$(function(){
$("button").click(function(){
alert(this.id);
});
});
</script>
</body>
</html>
Example 3
Using $(this).attr() function to get the ID value of the elements.
<!DOCTYPE html>
<html>
<head>
<title>Getting the IDs of clicked HTML elements</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>This is the page heading</h1>
<p>This is a paragraph</p>
<button type="button" id="btn1">Button 1</button>
<button type="button" id="btn2">Button 2</button>
<button type="button" id="btn3">Button 3</button>
<script>
$(function(){
$("button").click(function(){
alert($(this).attr("id"));
});
});
</script>
</body>
</html>
Conclusion
It is possible to detect and get the ID value or Class Name of the clicked element in an HTML page. jQuery provides an easy and quick way to achieve that.
In this article, we have covered with aid of multiple examples, the different ways in which you can get the ID or class name of the clicked HTML element using jQuery. You can copy the codes and try them by yourself.
It is my hope you found this article helpful. Have a happy coding experience.
