1. Put the data in the id attribute.
Whenever the link or a tag is clicked, you retrieve the id of the tag, and send the id along with the Ajax request. This is easier to achieve, however, sometimes you only wants to use a fix id for the tag, which is easier for you to retrieve the element later by directly passing the id to the jQuery selector. Then you have a problem, and the best practice is to try best to avoid using duplicate id for different tags. If the data you want to save is the same for some tags, then probably, this is not the best solutions as well.
2. Put the data in the arbitrary attribute
When I say arbitrary attribute, it means that you can define your own attribute and put it in the html tag. e.g.
One thing to note is that, in HTML5, it is valid to put your custom attributes but must be prefixed with data-.e.g
But this may only be viable when HTML5 becomes a universal standard.
3. Put the data in class attribute
This method may not seems elegant to some purists, however, it is universally supported and standard compliant. You can define you own syntax rules in the class name attribute.e.g.
With the above html, you can simply do the following:
var data = $('li.someclass').metadata(); if ( data.some && data.some == 'data' ) alert('It Worked!');
4. Put your data in another tag
You may want to wrap the html tag with a tag which contains the data, but with style “display:none”. e.g.
However, I personally don’t like this solutions. It makes the html contents messy.