How can I get the data-id attribute | jQuery
Any attribute on any element whose attribute name starts with data- is a data attribute. jQuery provides various methods for manipulating the HTML elements. You can simply use the jQuery attr() method to find the data-id attribute of an HTML element.
$(this).attr('data-fullText')
Example
<a data-id="999">google.com</a>
$(this).attr("data-id") // will return the string "999"
The attr() method sets or returns attributes and values of the selected elements.
Browser View
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
var id = $("#url").attr("data-id");
alert(id);
});
});
</script>
</head>
<body>
<p><a data-id="999" href="http://www.google.com" id="url" >google.com</a></p>
<button id="button1">Get Data-ID</button>
</body>
</html>
.data('attribute') method
The .data() (if you use newer jQuery >= 1.4.3) method allow you to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.
$(selector).data(name)
The .data() function expects and works only with lowercase attribute names.
Example
<a data-id="999" id="url" >google.com</a>
var id = $('#url').data("id"); // will return the string "999"
Browser View
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
var id = $('#url').data("id");
alert(id);
});
});
</script>
</head>
<body>
<p><a data-id="999" href="http://www.google.com" id="url" >google.com</a></p>
<button id="button1">Get Data-ID</button>
</body>
</html>
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?