How can I get the data-id attribute | jQuery

A data attribute encompasses any attribute associated with an element that commences with "data-". jQuery offers a range of methods for interacting with HTML elements. To retrieve the value of a data attribute, such as "data-id", the jQuery attr() method can be employed, allowing straightforward access to the desired attribute's value for the specified 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.

run this source code Browser View

google.com

Full Source | jQuery
<!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>


How to get value of data attribute and use it in jQuery

.data('attribute') method

If you are using a more recent version of jQuery (1.4.3 and above), the .data() method becomes available, enabling the attachment of data of diverse types to DOM elements in a manner that mitigates circular references and the potential memory leaks associated with them. This method ensures the safe management of data associated with elements, contributing to improved memory utilization and enhanced code reliability.

$(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"
run this source code Browser View

google.com

Full Source | jQuery
<!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>

Conclusion

To access the data-id attribute using jQuery, you can employ the .attr("data-id") method for older versions or the .data("id") method for newer versions (1.4.3 and above). These methods facilitate the retrieval of the value assigned to the specified data attribute, enabling efficient interaction with the data associated with HTML elements.