Filtering a Selection (^) ❘ 45
In this section, you got to know jQuery a little better with some in-depth explanations of and an
example using the methods find(), each(), is(), and val(). The next section continues along the
lines of examples of how to traverse the DOM using jQuery with an introduction to the jQuery
methods that allow you to move about the DOM.
Working with an Element’s Relatives
jQuery provides you with a comprehensive DOM traversal package. You can easily move from
an element to its siblings, its parent or ancestors and as its children and its descendants. In this
section, you see an example that introduces how to do all this, as well as how to limit a selection to
an element based on its numeric offset position in the selection and how to limit a selection’s scope
by providing a selector that fi lters your selection based on what you don’t want in the selection. The
discussion presented in this section encompasses the following methods of jQuery’s API:➤ (^) parent() and parents() are used to select an element’s parent or ancestors.
➤ (^) children() is used to select an element’s immediate children.
➤ (^) siblings() is used to select all of an element’s surrounding sibling elements.
➤ (^) prev() is used to select an element’s immediate preceding sibling.
➤ (^) next() is used to select an element’s immediate following sibling.
➤ (^) prevAll() is used to select all siblings coming before an element.
➤ (^) nextAll() is used to select all siblings coming after an element.
➤ (^) not() is used to remove elements from a selection using a selector.
➤ (^) eq() is used to zero in on a single element in a selection by providing its offset position within
the selection offset from zero.
You can also go up the DOM tree and select parent or ancestor elements. When programming, the
need to go up the DOM tree typically arises because you are in a situation in which you have multiples
of something in an application. For example, say you have multiple calendars in an application. This
could happen because you provide navigation to move from month to month, and instead of deleting
each month and building a new one, you keep each month in the application and move between them
as needed. If you click on a day within a month, you might also need to know which month that click
occurred in which, so you travel up the DOM from the selected day to discover which month the click
occurred on. This isn’t the only scenario you might want to select a parent or ancestor. You might also
run into this situation when you receive an event on an ambiguous or generic element, and you want
to get to an element that provides more meta information, class, id name, or other data.
The need to select children() is usually similar to the need to use the find() method introduced
earlier in this chapter. The decision of which to use is based on whether you know if an element is a
child, or if it is further down the DOM tree. Using children() if an element is a child provides you
with some performance benefi ts. If the browser knows that you want to look only in the pool of
immediate children, then that makes fi nding that element fast. However, using find(), you’re poten-
tially asking the browser to examine every descendant element.
http://www.it-ebooks.info