Question

I have an <a> element. I then have an associated jQuery object $("a") which I would like to modify. So I try the following:

$("a").myAttribute = 10;
alert($("a").myAttribute);    // <--- Alerts undefined

What is the problem?

Answer 1

Each use of $(‘a’) returns a different instance of an object. While your original code won’t work, you should be able to do:

var a = $('a');
a.myAttribute = 10;

alert(a.myAttribute.toString());

If you actually want to add the value to the DOM so that you can use it later, the “correct” way would be to use either the attr method (if you’re setting a valid HTML attribute) or the data method (if you want to use a non-standard name):

// valid HTML attribute
$('a').attr('name', 'someName');

// non-standard name
$('a').data('myAttribute', 10);

And then later:

alert($('a').attr('name'));

Or:

alert($('a').data('myAttribute'));

If you need something more complex (like storing a complex object rather than a simple attribute/data value), I would consider writing a simple jQuery Plugin which extends the jQuery object and ads the storage/retrieval methods required for your custom object.

To get started with a simple example, check out jQuery’s plugin authoring page:

Plugins/Authoring – jQuery