An easy setter/getter for HTML5 data-* attributes
GPL-2.0 License
This plugin simplifies the use of HTML5 custom data attributes in your jQuery code. It adds a function named .dataAttr()
to the jQuery namespace, which acts as a wrapper for jQuery.attr()
.
<p id="foo" data-time="9 AM">…</p>
// You can perfectly use this:
$('#foo').attr('data-time'); // '9 AM'
// But I prefer to do it this way, especially when dealing with a lot of data-*
$('#foo').dataAttr('time'); // '9 AM'
// Just like $.attr(), $.dataAttr() can be used as a setter
$('#foo').dataAttr('time', '3 PM');
// Computed data-* attribute values are possible as well
$('p').dataAttr('id', function() {
return this.id;
}); // p data-id="foo"
That’s up to you. This plugin isn’t rocket science.
However, it does allow you to write even more readable code. Personally, I like to keep custom data attributes separated from other attributes in my code — hence this plugin.
Since .dataAttr('foo')
minifies to .x('foo')
, while .attr('data-foo')
minifies to .y('data-foo')
, using this plugin can save you some bytes after minification, especially when dealing with a lot of data attributes in your code.
Note: As of jQuery 1.4.3, .data()
maps to custom data-*
attributes by default, rendering this plugin redundant. It can still be used for older versions of jQuery though.
Mathias Bynens |
This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.