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.






Related Topics
  1. How to get input textbox value using jQuery
  2. JQuery Get Selected Dropdown Value on Change Event
  3. How to submit a form using ajax in jQuery
  4. How can I get the ID of an element using jQuery
  1. Open Bootstrap modal window on Button Click Using jQuery
  2. How to select an element with its name attribute | jQuery
  3. How to disable/enable submit button after clicked | jQuery
  4. How to replace innerHTML of a div using jQuery
  5. How to get the value of a CheckBox with jQuery
  6. How to wait 'X' seconds with jQuery?
  7. How to check if an enter key is pressed with jQuery
  8. How to allow numbers only in a Text Box using jQuery
  9. How to dynamically create a div in jQuery?