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

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.

Answer 2

Why not to use it: your page will not validate on XHTML.

But that depends on how you see validation.

Answer 3

You could use the metadata plugin. Then your HTML would become:

<span class="{ time:'50', distance:'60'}"></span>

and your javascript would be:

var data = $('span').metadata();
var time = data.time;
var distance = data.distance;

That way your markup will validate and you can get data into your javascript on the server-side.

edit: Just noticed that you have mentioned the metadata plugin already. Sorry, I got over excited and just posted without reading the question properly. I'll leave my answer here though in case someone else finds it useful.

Answer 4

The confusion comes from the fact that jQuery treats attributes and DOM properties as the same thing, and they're not. Attributes are metadata about your markup; DOM properties are metadata about DOM objects. jQuery correctly uses DOM properties to manipulate metadata about DOM objects representing markup elements. It incorrectly uses the terminology "attribute" to describe this.

Answer 5

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.