Prepopulate jQuery Data in html

Question

jQuery has the very cool feature/method ".data", I wonder if there is a way to have the data in the code so that jQuery can use it when the rendering of html is done. Suppose i have a repeater and looping out children, and I want to add some data to those children without using classes etc. Will I have to add javascript to that repeater just to add stuff to the "data of jquery" or is there some better way?

Answer 1

There is the metadata plugin which might do what you are talking about

For example, you can do: (You can pick from different format by setting an option)

<li class="someclass {some: 'data'} anotherclass">...</li>
OR
<li data="{some:'random', json: 'data'}">...</li>
OR
<li><script type="data">{some:"json",data:true}</script> ...</li>
OR
<li data-some="'random'" data-json="'data'">...</li>

After that you can simply do:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('It Worked!');

Answer 2

HTML 5 has a new standard for attributes starting with "data-". See here link text.

You could use this to store data and use a selector to parse out the data.