Up to this point, we’ve been acting as if there were only one argument that we can pass to jQuery’s $() function, but this was just a bit of hand waving to keep things simple at the start. In lesson 1 we briefly introduced a second parameter called context. It’s used to restrict the selection to one or more subtrees of the DOM, depending on the selector used. This argument is helpful when you have a large number of elements in a page because it can narrow down the subtree(s) where jQuery will perform the second phase of the search.
As you’ll see with many of jQuery’s methods, when an optional argument is omitted, a reasonable default is assumed. And so it is with context. When a selector is passed as the first parameter, context defaults to document, applying that selector to every element in the DOM tree.
That’s often exactly what you want, so it’s a nice default. But there may be times when you want to limit your search to a subset of the entire DOM. In such cases, you can identify a subset of the DOM that serves as the root of the subtree to which the selector is applied.
The Selectors Lab offers a good example of this scenario. When that page applies the selector that you typed into the text field, the selector is applied only to the subset of the DOM that’s loaded into the DOM Sample pane.
You can use a DOM element reference as context but also a string that contains a jQuery selector or a jQuery collection. (Yes, that means that you can pass the result of one $() invocation to another—don’t let that make your head explode yet; it’s not as confusing as it may seem at first.)
When a selector or jQuery collection is provided as context, the identified elements serve as the context for the application of the selector. Because there can be multiple such elements, this is a nice way to provide disparate subtrees in the DOM to serve as the context for the selection process.
Let’s take the lab page as an example. We’ll assume that the selector string is stored in a variable conveniently named selector. When you apply this submitted selector, you want to apply it only to the sample DOM, which is contained within a div element with an ID of sample-dom.
If you were to code the call to the jQuery function like this
$(selector);the selector would be applied to the entire DOM tree, including the form in which the selector was specified. That’s not what you want. What you want is to limit the selection process to the subtree of the DOM rooted at the div element with the ID of sample-dom; so instead you write
$(selector, '#sample-dom');which limits the application of the selector to the desired portion of the DOM.
When you use context, jQuery first retrieves elements based on it and then selects the descendants that match the selector provided as the first argument. In other words, you search for elements that match selector that need to have context as their ancestor. Therefore, the Descendant selector can be replaced by the use of context. Consider the following selection where you select the <p>s inside a <div>:
$('div p');It can be turned into
$('p', 'div');giving the same result.
With this section we’ve completed the discussion of jQuery selectors. We know how hard it has been to go through all these selectors, and you shouldn’t feel discouraged. Take your time to absorb the described concepts, and when you feel ready, move on.
Before we look at the methods of lesson 3, we’ll test your skills with some exercises focused on the concepts described so far.
Leave a Reply