A jQuery question about variables and selectors

Question

Lately, I have been doing this in an effort to speed up performance (and sometimes it helps with maintainability)

var objectToReference = $('div .complicated #selector ul:last');

So what does objectToReference really hold? Sometimes things have bitten me, so I've gone back to using the full selector and it has worked.

So does the variable hold a reference, a pointer, etc (I'm not sure the exact definition of those terms)

Thanks

Answer 1

It holds a jQuery collection, which is an array. You may have gotten in trouble if the DOM changed on you.

---

Looked into it a bit further and found that the collection (which you can treat like an array) is an object with array-like properties.

http://www.learningjquery.com/2008/12/peeling-away-the-jquery-wrapper-and-finding-an-array

Keep in mind that arrays and objects are very much alike in JavaScript. For more, see my Kirk & Cheesecake post.

Answer 2

The return value of a jQuery selector is an array of jQuery elements. If the selector does not find any matches, then it contains an array with 0 elements.

Each element in the array is essentially a reference to the matching DOM element in the HTML document. This is what allows you to traverse and manipulate them as needed.

Answer 3

It holds a reference to the jQuery object that was returned. Any changes to the object change the underlying DOM element and all other references to the same element.

$('div .complicated #selector ul:last')

Your variable objectToReference will be a jQuery object that you can perform jQuery operations on. Also, even though you don't have to, you can also use objectToReference to create a new jQuery object, which shouldn't impose any performance limitations since it should just return a reference to itself and not re-search for that element.

var objectToReference = $('div .complicated #selector ul:last');
var copyOfObject = $(objectToReference);

You may have run into problems by trying to reference DOM properties of the objectToReference. If you want to get at the underlying DOM element of your objectToReference returned by the jQuery selector, you can do this:

var objectToReference = $('div .complicated #selector ul:last');
var domOfObject = objectToReference.get(0);

Or optionally, you could do this, which does the same in 1 line:

var domObjectToReference= $('div .complicated #selector ul:last').get(0);

Again, you can use the domObjectToReference in the jQuery constructor to create another reference to that object:

var objectToReference2 = $(domObjectToReference);

All of these examples store references to the DOM element. If you modify the value of one of the references, they will all be modified/updated.

Answer 4

A best practice that many people use when they create a variable like this is to name it starting with $, to indicate that it is a jquery object. So you could name the variable $o, and you can directly call other jQuery chain functions after it, without having to put $() around the variable.

$o.hide();

It is a good idea to start with the surrounding element for the area you are manipulating, to avoid having to search the entire document. For example, to get all links within a single section of the document (without having to search the whole document):

var $o = $('#mysection');
var $links = $('a', $o); // equiv to $o.find('a')

Finally, it never hurts to pass a jQuery object back through jQuery:

$o === $($o)

This has a nice side effect - you can write a function that accepts any of the following as an argument: a selector, an element, or a jQuery object:

function myFunc(e) {
    var $e = $(e);
}
// All of the following will work:
myFunc('#mysection');
myFunc(document.getElementById('mysection'));
myFunc($('#mysection a'));

Answer 5

For anyone who's interested I've published V2 of a jQuery reference if you want to have a look at that it's here: http://www.skidoosh.co.uk/jquery/jquery-selectors-and-attribute-selectors-reference-and-examples-v2/ for jQuery 1.2 I'll be updating it for 1.3 in a few days.