Use of this plugin is not recommended anymore. Use data-* attributes and $.fn.data instead. This was a possible solution, a long time ago.
A few weeks ago former colleague Jurriaan wrote a PrototypeJS extension to accessing data stored within classes of HTML elements. Basically it comes down to assigning extra classes (classes such as gender_male for example, which represent a property and a value) on an element, which you then read/write via Jurriaan’s extension. As this way of assigning data is a technique I’ve been using too, I took the liberty of writing a jQuery blend of his script.
Ow ow, what is this all about?
I suggest you read Jurriaan’s excellent post on the subject if you’re not acquainted with the subject. It situates the problem and explains the necessity of this plugin.
Cool, any demo?
Elementary my dear Watson, elementary:
Gimme gimme gimme (Download)!
Find the source on GitHub (click on the Download button)
Okay I downloaded it: How to I use this thing / Any differences between yours and Jurriaan’s version?
Usage is simple: include the script after you’ve included jQuery. From then on you can use the classData() function on a jQuery Object:
// Set data - this will set the class 'extradata_yes' on the elements that match the selector (note that the plugin does not break chaining)
$('.mySelector').classData('extradata','yes').css('backgroundColor','lime');
// Get data - alerts the extradata value of the elements that match the selector
alert($('.mySelector').classData('extradata'));
Please note that the setting of data does not break jQuery’s chaining.
As you might have noticed the getter and setter functions are non-existent: there’s one function to handle both the mutation and accessing of the data (this differs from Jurriaan’s approach: he has two functions)
Now, you might have noticed that there’s no way to set the glue (which defaults to an underscore) used in the call itself. Therefor an extra function comes in handy: classDataGlue(). Via that function you can set glue before getting and/or setting data.
// Set data with custom glue - this will set the class 'extradata-yes' on the elements that match the selector (note that the plugin does not break chaining)
$('.mySelector').classDataGlue('-').classData('extradata','yes').css('backgroundColor','lime');
// Alert current glue (note that we need to have a jQuery object for this)
alert($('').classDataGlue());
// Get data (note that the glue is still known to the plugin) - alerts the extradata value of the elements that match the selector
alert($('.mySelector').classData('extradata'));
// Get data that uses % as glue:
alert($('.mySelector').classDataGlue('%').classData('otherdata'));
Again note that the setting of the classDataGlue does not break jQuery’s chaining. Also note that when you set the glue, the calls that happen after it will still use that glue (viz: once the glue is set, it keeps using that glue. Make an extra call to classDataGlue() to set it to an other value).
Thanks a bunch, how can I thank you?
You may always leave a comment below and/or – it certainly is no obligation but it would most certainly put a smile on my face – make a donation.
Great stuff, perfect (and definitely a better) alternative for those stuffed “rel”-tags. Thanks!
Thanks for porting to jquerv.
And, just for the record, I’d like to state my girlfriend Laura Bogaert is female.
Jurriaan, I actually took the example code from your site (last xhtml example) 😉
Why not use the Metadata plugin .. more flexible with the variables, the data and the argument/parameter that holds the info
djot,
the Metadata plugin allows one to use three types of syntaxes, of which two are incorrect/invalid (the one with the data attribute, and the one with the custom script type).
The other option (to embed JSON in your className) might be valid, but – one must admit – looks pretty weird.
Nonetheless it does give more options and might be handy in some scenarios. I myself – of course – prefer the method posted in this post here 😉
An extension for this plugin – for example – could be to extract all data from an element (just like the metadataplugin does) and provide that as an object which one can then later one use (queriedData.gender for example).
Why not just use custom data-* attributes instead?
@Mathias: This code however is nearly two years old by now, back then this was the way to do it 😉
So back in February 2009, HTML5 didn’t exist and no one was using custom data-* attributes? 😛