Question

Is there any way to have DOM elements selectable through objects?

For example I want to be able to associate objects to DOM elements like so:

var obj = { a: 1, b:2 };
$('a').click(function() { this.selectThing = obj });

And later on…

$.something(obj);

Or even better:

$('a|selectThing?=', obj);

Something like that. You can see that I want to associate an object to a DOM element in such a way that I can grab the element with the object.

I know this can be done with the filter() method, my question is if there’s a more elegant way that doesn’t use filter() to do this.

EDIT:

To clarify, I want to be able to use an object kind of like a selector, so I can do something similar to this $(obj) obviously that won’t work, but you get the idea (I hope)

EDIT #2:

I want to be able to do something like this:

var obj = { prop: 'prop' };
$('a').bindTo(obj);
$.retreive(obj) // should equal $('a')

I don’t want it to alter obj in any way though (obj should still be {prop: 'prop'} only).

Answer 1

Extend jQuery with three methods:

jQuery.bindObj(data)
jQuery.unbindObj(data)
$.retrieve(data)

Your code looks like:

$('a').bindObj({blorg: 'shmorg'});
console.log($.retrieve({blorg: 'shmorg'})); // logs live result of $('a');

Full source: http://jsfiddle.net/nUUSV/6/.

The trick to this solution is storing the selectors/identifiers based to the jQuery constructor in one array, and the objects bound to those selectors/identifiers in another array, then using $.inArray to get the index of the object upon retrieval and using that index to grab the bound jQuery collection.