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.