Accessing data saved in the class property of DOM-elements with jQuery

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).

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.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

8 Comments

  1. Why not use the Metadata plugin .. more flexible with the variables, the data and the argument/parameter that holds the info

  2. 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).

  3. 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? 😛

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.