An easy setter/getter for HTML5 data-* attributes
JavaScript
Latest commit 3365b6b May 31, 2013 @mathiasbynens Add license
Closes #1.
Permalink
Failed to load latest commit information.
.gitattributes Add bower.json May 31, 2013
.gitignore Add bower.json May 31, 2013
LICENSE-GPL.txt Add license May 31, 2013
LICENSE-MIT.txt Add license May 31, 2013
README.md Add license May 31, 2013
bower.json Add bower.json May 31, 2013
jquery.dataAttr.js Add bower.json May 31, 2013
jquery.dataAttr.min.js Add bower.json May 31, 2013

README.md

HTML5 custom data attributes jQuery plugin

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().

Example Usage

HTML

<p id="foo" data-time="9 AM">…</p>

jQuery

// 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"

Useful?

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.

Author

twitter/mathias
Mathias Bynens

License

This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.