jQuery Find Element With Data Attribute
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of jQuery find element with data attribute, here we needs to use addClass(), data attribute and click() methods.
The addClass() is an inbuilt method which is used to add more property to each selected element.
It can be used to change the property of selected element and as we know click() method used for loads some process when user clicks on button element defined html code.
So here we can get data value from input element from html code.
Step By Step Guide On jQuery Find Element With Data Attribute :-
Here we defined html block with four para tags with data-slide attribute, it have different values, strings and button ‘Find Element’ for generate some process when user clicks on it.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we waiting for click event occurrence which is appended with button then there we specifying data-slide attribute with value for finding purpose then we adding class by using addClass() method.
<!DOCTYPE html>
<html>
<head>
<title>FIND ELEMENT WITH DATA ATTRIBUTE</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('[data-slide="1"]').addClass('demo');
})
})
</script>
</head>
<body>
<style>
.demo{
font-size: 200%;
color: brown;
}
</style>
<p data-slide="0">Green</p>
<p data-slide="1">Yellow</p>
<p data-slide="2">Orange</p>
<p data-slide="3">Violet</p>
<button>Find Element</button>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we appending click() method with button by using tag name ‘button’ for generate click event when user clicks on ‘Find Element’ button.
- Within function we needs to specify data-slide attribute with value ‘1’ for finding purpose from other data-slide attributes then which is appends with addClass() method there we passed ‘demo’ class.
- In style block we defined style for class demo i.e (font size set to ‘200%’, color set to ‘brown’) so when user clicks button ‘Find Element’ which styles applied on found element.
- In html block we defined four paragraph elements with data-slide attribute it have different strings ‘Green, Yellow, Orange, Violet’ and button ‘Find Element’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to find element with data attribute using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see four para tags of ‘Green, Yellow, Orange, Violet’ and button ‘Find Element’ now user needs to click on it then we can see found element have that defined style for user verifications.
I hope this article on jQuery find element with data attribute helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
