jQuery: Using the attr with custom attributes

Question

Right now I'm doing various invalid things like:

<span time="50" distance="60"></span>

And then grabbing that info with:

var time = $('span').attr('time');
var distance = $('span').attr('distance');

And then doing various things with the time and distance in jS/jQuery.

To me, this feels wrong. It's insemantic, but I really can't care less about that (actual data is not time and distance but something quite worthless and page specific, nothing that SEs are interested in). But is there some other reason why this is a bad idea?

I know there's a metadata plugin which does something similar in a more 'official' way, and I thought about using it. But this .attr stuff is suitable for my needs and I don't see any compelling reason to use the plugin.

So basically, is this a decent pattern to use, and if not, why not, and should I be interested in the metadata plugin.

Thanks.

Answer 1

HTML5 includes support for embedding data in attributes which is backwards compatible. Here's an example:

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

Useragents will perhaps implement the .dataset idea into javascript, which would easily let you pull out the data bits seperately, but for now just changing your classes to include data- is good enough. This will validate as HTML5.

To me this is far better than that metadata jquery idea - that just seems dumb to me.

See here for more info.

Answer 2

If you are going to use custom attributes, and are using XHTML, it would be a good idea to namespace them and provide the appropriate 'xmlns' definition as part of the 'html' element. I do this any time I need to add attributes to provide some contextual information and it's worked quite well so far, especially with jQuery. You'd just use .attr('ns:name') instead.