This post will demonstrate all possible methods to read and change data attribute values in jQuery through the listed methods:
Let’s start with the jQuery “data()” method.
Before moving to the practical implementation, first, look at the following HTML code:
In the above-stated one line of HTML code, the “<div>” tag creates a div element with an id “myDiv” and assigns the following data attributes “data-name” and “data-age”.
Method 1: Read and Change Data Attribute Values Using the “data()” Method
jQuery “data()” method helps to attach and get the data from the selected HTML element. In this scenario, it is used to read and change the data attribute values. This method carries out the practical implementation to read and change data attribute values using the “data()” method.
Example 1: Read Data Attribute Value
This example applies the “data()” method to read the specified data attribute value:
$(document).ready(function(){
var name= $("#myDiv").data("name");
var age= $("#myDiv").data("age");
console.log(name);
console.log(age);
});
</script>
In the provided code snippet:
- Firstly, the “ready()” method executes the specified functions when the current HTML document is loaded on the browser.
- Next, the “data()” method reads the value of the data attribute named “age” used in the “div” element that is accessed via its id “myDiv”.
- The same process is followed for accessing the “name” data attribute.
- Lastly, the “log()” method displays the “name” and “age” variables output in the web console respectively.
Output
It can be seen that the console has displayed all the accessed data attribute values.
Example 2: Change Data Attribute Value
This example uses the “data()” method to change the particular data attributes values:
$(document).ready(function(){
$("#myDiv").data("name", "Justin");
var newname= $("#myDiv").data("name");
console.log(newname);
$("#myDiv").data("age", "40");
var newage= $("#myDiv").data("age");
console.log(newage);
});
</script>
In the above code snippet:
- The “data()” method first changes the value of the data attribute named “name” and then displays this value using the “log()” method.
- Next, the “data()” attribute value changes the “age” data attribute value and shows it in the web console via the “console.log()” method.
Output
Now, the console shows the updated values of the targeted data attributes.
Method 2: Read and Change Data Attribute Values Using “attr()” Method
The “attr()” is another built-in jQuery method that sets or retrieves the value attribute of the selected HTML element. In this method, it is used to show and change the data attribute values of the sample div element. Let’s use the above-defined method practically.
Example 1: Read Data Attribute Value
This example utilizes the “attr()” method to read the desired data attribute value:
$(document).ready(function(){
var name= $("#myDiv").attr("data-name");
var age= $("#myDiv").attr("data-age");
console.log(name);
console.log(age);
});
</script>
The above code lines use the “attr()” method to read the specified “data-name” and the “data-age” attribute values.
Note: The “attr()” method specifies the data attribute with the prefix “data” followed by a hyphen(-) i.e. (data-) that does not require while using the “data()” method.
Output
The web console successfully displays targeted data attributes value.
Example 2: Change Data Attribute Value
This example uses the “attr()” method to change the existing values of specified data attributes values:
$(document).ready(function(){
$("#myDiv").attr("data-name", "Justin");
var newname= $("#myDiv").attr("data-name");
console.log(newname);
$("#myDiv").attr("data-age", "40");
var newage= $("#myDiv").attr("data-age");
console.log(newage);
});
</script>
Now, the “attr()” method also specifies the new value as the second parameter of the specified data attribute to update its existing value with the new one.
Output
It is observed that the console shows the updated values of the data attributes that have been changed via the “attr()” method. This is all about reading and changing the data attribute values with jQuery.
Conclusion
To read and change the data attribute values, use the jQuery “data()” or the “attr()” method. Both methods require the data attribute as their essential parameter to perform the desired operation on it. The “data()” method takes the data attribute without the “data” prefix whereas the “attr()” method needs to specify the full name of the data attribute. This post practically demonstrated all possible methods to read and change data attribute values in jQuery.
