How can I get the data-id attribute?

Dissecting jQuery's .data() and .attr()

jQuery gives us two methods to access data attributes - .data() and .attr(). But these buddies can sometimes fool around! .data('id') returns a value from jQuery's internal data store which might not be updated if you use .attr() to modify the data-id value after the page load. .attr(), on the other hand, fetches the current attribute value from the element’s HTML, making it a more loyal pal.

In a world where application behavior needs to be predictable (especially in browsers like Firefox), .attr('data-id') is often the recommended choice. But remember, dynamically changing data attributes via .attr() doesn't automatically update the internal data object managed by jQuery. So, .data() might not reflect the most recent changes.

Alternative Route: Vanilla JS

Venturing out of jQuery, vanilla JavaScript also provides us with methods to access data attributes. The getAttribute('data-id') can be used as follows:

var element = document.querySelector('#element');
var dataId = element.getAttribute('data-id');


Alternatively, if you are on friendly terms with modern browsers, you can use the .dataset property:

var dataId = element.dataset.id;


Remember, smiling back at IE users is a good gesture. Always check resources like caniuse.com for feature support to ensure your code behaves well across different territories.

Staying Alert & Avoiding Pitfalls

• Our languages might mix up, but in code, lowercase is the norm after data-. So element.dataset.userid for data-user-id!
• To update values with jQuery without offending any browser, use .attr('data-id', 'newvalue'), it's the title holder for cross-browser compatibility.
• jQuery .data() is like a Swiss army knife: its primary job is to read "data-" attributes, but can also set data in jQuery's internal store without affecting the attributes visible to the user.
• A quick tip: don't invite the infamous hash (#) to the .attr() party. .attr("#data-id") is not the dress code here!
• Multi-word data attributes like data-my-attribute follow camelCase when accessed via .dataset. So use dataset.myAttribute.

Dynamic data sorcery with jQuery

Working with changing data, it helps to keep a magic trick up your sleeve: if you update a data attribute via .attr(), play the wizard by also updating jQuery's data object to maintain synchronization:

$('#element').attr('data-id', 'newvalue').data('id', 'newvalue'); // "You shall not pass ...without updating me!"


This way, subsequent calls to .data('id') will reveal the latest magical number.

Embracing Future

Although jQuery has been the indomitable warrior, modern JavaScript has brought the .dataset API to the frontlines. This not only frees your code from jQuery dependency but also makes it compatible with upcoming development standards. Plus, your code gets a speed boost, thanks to the direct DOM manipulation powers of vanilla JS.