DOM Traversal Methods

[ 39 ]
Chapter 3
Selector Context
By default, selectors perform their searches within the DOM starting at the document
root. However, an alternative context can be given for the search by using the
optional second parameter to the $() function. For example, if within a callback
function we wish to do a search for an element, we can restrict that search:
$('div.foo').click(function() {
$('span', this).addClass('bar');
});
Since we've restricted the span selector to the context of this, only spans within the
clicked element will get the additional class.
Selector context is also useful for XML documents, as they do not form part of the
default DOM tree. For example, if an AJAX call has returned an XML structure in the
variable data, then we can perform searches within that structure:
$('//foo/bar', data)
Internally, selector context is implemented with the .find method, so $(selector,
context) is equivalent to $(context).find(selector).
While the jQuery API only specifies DOM elements, arrays of DOM
elements, and jQuery objects as valid contexts, in practice selectors and
HTML snippets can be used here as well.
Wrapping DOM elements
The second and third formulations of this function allow us to create a jQuery object
using a DOM element or elements that we have already found in some other way.
A common use of this facility is to perform jQuery methods on an element that has
been passed to a callback function in the keyword this:
$('div.foo').click(function() {
$(this).slideUp();
});
This example causes elements to be hidden with a sliding animation when clicked.
An element must be wrapped in a jQuery object before we call jQuery methods on
it because the handler receives the clicked item in the keyword this as a bare
DOM element.