jQuery get data, and text attribute value by id, name, and class from an element; In this tutorial, you will learn how to get and set data-attribute, data attribute id, data-attribute text, etc using jQuery .attr() and .data() method.
jQuery provides various methods for manipulating HTML elements. In this jquery tutorial, you will learn two ways to get data-id, data-attribute, data-text, etc. And how to set the data attribute values using the jQuery attr() and data() methods.
jQuery Get Data Attribute Method
jQuery offers various methods to get data attribute values. Now, You can learn two simple methods to get the data-any attributes of selected HTML Elements.
Here you can see that two types of get data attribute methods are:-
- .data(‘attribute’) method
- .attr(‘attribute full name’) method
.data(‘attribute’) method
Using the jQuery data() method to find the data-text, data-id or any attribute of an HTML element.
Syntax of data() method
Using the syntax Get data-id and other attributes
$("selector").data("id");
You can use this jquery data() syntax to get the data-id attribute value.
$("selector").data("textval");
You can use this jquery data() syntax to get data-textval attribute value.
Example for jQuery data() method
This example will demonstrate to you how get data attribute values like data-id, data-class, data-text or any other data attribute using jquery data() attribute method from selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Get data-id and other attribute using jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".getDataId").click(function(){
var id = $('#getId').data("id");
var text = $('#getText').data("textval");
alert('Your id is =' + id);
alert('Your text value is =' + text);
});
});
</script>
</head>
<body>
<h3 style="margin-bottom: 10px">Below this checkbox & input box are disabled</h3>
<p><input type="text" id="getId" data-id="100" value="5000"></p>
<p><input type="text" id="getText" data-textval="Hello world" value="Hello world"></p>
<p><b>Note:</b> Click the below buttons and get Data id and text.</p>
<button type="button" class="getDataId">Click Me!</button>
</body>
</html>
Output
Below this checkbox & input box are disabled
Note: Click the below buttons and get Data id and text.
In the above data() method example, When you click on button after that open a popup box with data-id and data-text attribute values.
.attr(‘attribute’) method
Using the jQuery attr() method to find the data-text, data-id or any attribute of an HTML element.
Syntax of attr() method
Using attr() method syntax Get data-id and other attribute
$("selector").attr("data-id");
You can use this jquery attr() syntax for get data-id attribute value.
$("selector").data("data-textval");
You can use this jquery attr() syntax for get data-textval attribute value.
Example for jQuery attr() method
This jquery attr() method example will demonstrate to you how to get data attribute values like data-id, data-text data-class or any other data attribute using jquery attr() attribute method from selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to Get data-id Attribute</title>
<title>How to Get data-id and other attribute using jQuery</title>
<script type="text/javascript">
$(document).ready(function() {
$(".data_attr").click(function(){
var id = $('#attrId').attr("data-id");
var text = $('#attrText').attr("data-textval");
alert('Your id is =' + id);
alert('Your text value is =' + text);
});
});
</script>
</head>
<body>
<h3 style="margin-bottom: 10px">This is example of attr() method</h3>
<p><input type="text" id="attrId" data-id="100" value="5000"></p>
<p><input type="text" id="attrText" data-textval="Hello world" value="Hello world"></p>
<p><b>Note:</b> Click the below buttons and get Data id and text.</p>
<button type="button" class="data_attr">Click Me!</button>
</body>
</html>
Output
This is example of attr() method
Note: Click the below buttons and get Data id and text.
In the above attr() method example, When you click on button after that open a popup box with data-id and data-text attribute values.
Set attribute values
How to set the data attribute values using the jquery data() & attr() method?
Syntax data() for set the attribute value
$('selector').data('myval',200); // using this syntax for set data attribute value
Syntax attr() for set the attribute value
$('selector').attr('data-myval',200); // using this syntax for set data attribute value
Difference between jQuery attr () and data () method
Main diffrence between this methods are jQuery attr() method return the string and the data() method is return the number. Below the short demostration example of this two method are :
$("selector").attr("data-id") // it will return the string "123"
$("selector").data("id") // it will return the number 123
Recommended jQuery Tutorials
- jQuery | Event MouseUp By Example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
