Question

It is in my understanding that referencing any DOM element in jQuery via the dollar sign (like this: $("#mydiv")), returns an object.

I am looking to add an additional property to an object as such:

$("#mydiv").myprop = "some value";

but this does not seem to work.
I am trying to store a value in this object so I can reference it later.

The following code, though, gives me an undefined value even immediately after I set the property.

$("#mydiv").myprop = "some value";
alert($("#mydiv").myprop);

this code does not work either:

$("#mydiv")["myprop"] = "some value";
alert($("#mydiv").myprop);

Is there a way to achieve this? Or do I need to store all my properties as attributes on the DOM object via $("#mydiv").attr("myprop", "some value") (this is much less desirable).

Thanks!

Answer 1

jQuery exposes the concept of a property-bag with the data method.

// set some arbitrary data
$('#selector').data('example-property', exampleValue);

// get the value later
var theValue = $('#selector').data('example-property')

This avoids DOM manipulations which can be expensive in terms of performance.