jQuery get data, text attribute value by id, name, class from 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 the HTML elements. In this jquery tutorial, you will learn two ways to get data-id, data-attribute, data-text etc. And how set the data attribute values using the jQuery attr() and data() method.
jQuery Get Data Attribute Method
jQuery offers various method to get data attribute values, Here You can learn two simple method to get data-any attribute of selected html Elements.
Here you can see that two type 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 attribute
$("selector").data("id");
You can use this jquery data() syntax for get data-id attribute value.
$("selector").data("textval");
You can use this jquery data() syntax for get data-textval attribute value.
Example for jQuery data() method
This example will demostrate you how get data attribute values like data-id, 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>
.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 demostrate you how get data attribute values like data-id, data-text 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>
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
