Web Development with jQuery®

(Elliott) #1

(^34) ❘ CHAPTER 2 SELECTING AND FILTERING
do something more with it. You can do this with virtually any language, which is to say, create an
object and have the methods of that object return the object itself.
In this section you take a look at the various methods that jQuery provides for modifying a selection
in the context of another selection.


Working Within the Context of a Selection


This section introduces a few of jQuery’s methods: find(), each(), is(), and val(). This discussion
begins with a method used to search for other elements in the context of an existing selection called
find(). As I present to you an example of one way you might use the find() method, you also see
in the same example each(), is(), and val(). I provide you with a detailed introduction to each(),
is(), and val() later in this section in the context of the explanation for Example 2-2 because I
could not begin a discussion about find() without also introducing these other methods. However,
to start this leg of your journey into jQuery, you have a look at the find() method, how you might
use it, and more important, some techniques you’ll want to employ and some behavior you’ll want
to avoid when you make use of it.

jQuery’s find() method enables you to perform a selection within a selection. Another way of say-
ing this is that it lets you search within the context of a selection. A selection, as you have already
seen, can contain one element or many elements. Most of the methods that jQuery provides are
done with the consistent assumption that a selection can contain just one or many elements. find()
is no different; it can be used with a selection containing one or more elements, and it operates to
search within the context of every element present in a selection. So, if you have a selection contain-
ing just one <form> element, and you use find() on that selection, you’ll be looking within just that
one <form> element. If you have a selection containing multiple <form> elements, and you use find(),
find() will be carried out in the context of each of the <form> elements present in the original selec-
tion. So, the fi rst takeaway from using find() is that it can be carried out with selections large and
small, and using it can become large and unwieldy quickly.

You use find() if you know that an element (or a collection of elements) contains another element
(or collection of elements) somewhere down the DOM tree starting with the pivot of that initial
selection. The key thing to remember when turning to find() in your toolbox is that you don’t know
how far down the tree this additional element or collection of elements might be. For example, if you
know that your second selection will be children or siblings of your initial selection, you’re better off
using the jQuery methods children() or siblings() because they’re faster for that situation.

find() is a bit of a blunt instrument; it works well and can even be fairly effi cient to very effi cient
depending on the scenario in which it is used, but it is one of the most general-purpose methods of
fi ltering a selection that jQuery provides. Because the DOM can be either large and very complex, or
very small and simple, when selecting elements using the jQuery Selectors API in general, without yet
even contemplating the best uses of the find() method, it is best to take a step back and remember
a few basic things to keep your scripts fast, optimized, and ready to deal with any scenario. First,
remember to construct your documents with appropriate and strategically placed unique id names.
Id names are meant to be unique; class names are not meant to be unique. Because id names are
meant to be unique, if you create a document with unique id names, the browser can use an effi cient
index to look up any element by the id name in the DOM. Therefore, when you do a selection using
jQuery, the fastest possible selection that you can make is one that involves the use of an id name.

http://www.it-ebooks.info

Free download pdf