Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find class of a clicked element using jQuery?
Overview
We can easily find the class of the clicked element, the Jquery provides various methods which return the class name of the element when the element is clicked. The Jquery methods "attr()" and using "this.className" properties helps to find the class of an element. So to learn more about these methods we will be seeing the Examples which will cover both the methods. A class name is an attribute which defines the group or type of the data inside the tag. There can be different tags or elements which can contain the same class names but there in case of id name there can only be a single tag that contains a unique id name as id name not be the same for several tags or elements.
Syntax
The given below shows the Syntax to find the class of clicked element −
$(this).attr("class");
$(selector).text(this.className);
this − In the above Syntax "this" is a keyword which states the current element as a reference variable.
attr("class) −This method returns a value of an attribute's key. In which the attr() method is passed with the "class" attribute as the attr() will return the class name of the element..
selector − A selector is any element which is being clicked by the user, it can be any tag such as p, div or button or any tag.
this.className − It returns the class name of the element which is clicked as the clicked elements reference will be stored in the "this" keyword and className will return the class of the element.
Algorithm 1
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now add the Jquery CDN (Content Delivery Network) link to the head tag of the HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Step 3 − Now create a few HTML buttons with their respective class names.
<button class="reset">Reset Button</button> <button class="submit">Submit Button</button> <button class="clear">Clear Button</button> <button class="close">Close Button</button> <div></div>
Step 4 − Now add the style tag for the layout of the page.
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
Step 5 − Now add the script tag to the body tag.
<script></script>
Step 6 − Now using the Jquery selector select the button tag with a click function.
$("button").click(function(){})
Step 7 − Now use the attr() method to get the class name and set the class name to the div.
$("div").text($(this).attr("class"));
Step 8 − The function is ready to return the class name of the clicked element.
Example 1
In this Example we will be using the attr("class") method of Jquery to get the class of the clicked element.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>find class of clicked element</title>
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<h3>Click on the button to get their respective class.</h3>
<button class="reset">Reset Button</button>
<button class="submit">Submit Button</button>
<button class="clear">Clear Button</button>
<button class="close">Close Button</button>
<div></div>
<script>
$("button").click(function(){
$("div").text($(this).attr("class"));
})
</script>
</body>
</html>
The given below image shows the Output of the above Example which shows the HTML button as Reset Button, Submit Button, Clear Button and Close Button. These elements also contain the class attributes with their respective name. So when a user clicks on the particular button it returns the class name as shown in the below image with the green color. So in the below image a user clicks on the submit button so it returns the class name as submit in green color.
Algorithm 2
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now add the Jquery CDN (Content Delivery Network) link to the head tag of the HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Step 3 − Now create the ordered list with the list tags and their respective class names.
<ol> <li class="Frontend Technology">HTML, CSS and JavaScript</li> <li class="Backend Technology">NodeJs, ExpressJs</li> <li class="Programming Language">Java, Python and C++</li> <li class="API Testing">Postman</li> </ol> <div></div>
Step 4 − Now add the style tag for the layout of the page.
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
Step 5 − Now add the script tag to the body tag.
<script></script>
Step 6 − Now using the Jquery selector select the list tag with a click function.
$("li").click(function(){})
Step 7 − Now use the "this.className" method to get the class name and set the class name to the div.
$("div").text(this.className);
Step 8 − The function is ready to return the class name of the clicked element.
Example 2
In this Example we will be using the "this" keyword reference with the className method which will return the current element's class name when clicked.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>find class of clicked element</title>
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<h3>Click on the list to get their class</h3>
<ol>
<li class="Frontend Technology">HTML, CSS and JavaScript</li>
<li class="Backend Technology">NodeJs, ExpressJs</li>
<li class="Programming Language">Java, Python and C++</li>
<li class="API Testing">Postman</li>
</ol>
<div></div>
<script>
$("li").click(function(){
$("div").text(this.className);
})
</script>
</body>
</html>
The below image is the Output of the above Example which shows some lists with the technologies. These list tags contain the respective class names as the technology name such as frontend technology, backend technology, programming language and API testing. So when a user clicks on the first list tag which contains the HTML,CSS and JavaScript it returns with its class name as Frontend Technology in green color.
Conclusion
This feature is used in many pages to provide dynamic behavior, for Example there may be some situation in which a developer wants to trigger the function when a certain class element is clicked which eases the DOM manipulation in HTML as a JavaScript function. In the above Example the text() method also plays an important role in displaying the Output as class name on the browser's window.
325 Views
