is there a way to add a variable/property to a DOM element (eg, an element returned by a jQuery selector)

Question

Hi there,

I am looking for an alternative to using an object/variable in global scope -- I would like to associate key/value pairs with specific DOM elements (eg, a DIV), so that I can use them as input for logic that processes other elements (eg, child elements of said DIV).

I tried something naive like: $('[foo=bar]').key='value' , and $('[foo=bar]')[key]='value', but it puked.

Doing something like: var foobar = $('[foo=bar]'); foobar.key = 'value' -- works, but the new property/value only affects the new object (ie, foobar, not $('[foo=bar]'))

Most likely there's something terribly basic I am overlooking. Any help is appreciated, thanks!

Answer 1

$().data() is what you seek

Answer 2

Here is a link to .data() in the API Documentation for jQuery.

Description: Store arbitrary data associated with the matched elements.