jQuery Find By Data Attribute Name
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Riya
In this article we will show you the solution of jQuery find by data attribute name, an element on such a web page (or application) can have extra information added to it using the data-* attribute, which can then be utilized for processing.
Every element whose attribute begins with the prefix data- (as word data, followed by such a hyphen) is considered to have a data attribute.
For instance, I have an element that I want to use the ">data attribute to attach some basic data to.
We can just use new element attributes in addition to attributes. This article will show you how to use jQuery to retrieve a value of either a custom attribute inside of an HTML element.
A data attribute is that any attribute on most any element whose attribute name begins with data-. jQuery offers a number of ways to manipulate HTML elements.
To obtain the data-id attribute of such an HTML element, merely employ the jQuery attr() method.
If you utilize jQuery (>= 1.4.3) or a later version,you can attach material of any sort to DOM elements using the.data() method without worrying about memory leaks or circular references.
Step By Step Guide On jQuery Find By Data Attribute Name :-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[data-slide="0"]').addClass('demo');
});
</script>
<style>
.demo {
font-size: 150%;
color: red;
}
</style>
</head>
<body>
<p data-slide="0">Ron</p>
<p data-slide="1">Harry</p>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- Then again we open the <script> tag and then add. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then The style is then closed and head close.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a data slide
- After that we close program using</body></html>
Conclusion :-
The JQuery attr() function allows us to obtain the values of HTML attributes.An attribute can also be set using the same technique.
Moreover, JQuery data() has a function for retrieving HTML5 data attributes that returns the values of all data elements.
I hope this article on jQuery find by data attribute name helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
