JavaScript & jQuery: The Missing Manual ... - Robert Guajardo

Traversing the DOM
In order to get the most done while writing the least
amount of code, jQuery lets you chain functions together.
Chaining is discussed on page 137, but in a nutshell it lets
you select some pages elements, do one thing to them,
then do another and another thing to them, simply by adding
one function after another. For example, if you wanted
to select all the paragraphs on a page and have them fade
out of view then fade back into view, you could write this
code:
$(‘p’).fadeOut(500).fadeIn(500);
You can chain as many functions together as you’d like
including the DOM Traversal methods discussed above.
For example, you could select a tag, add an outline
around it, and then select all of the tags inside that
and change the color of their text like this:
$('div').css('outline','2px red solid').
find('a').css('color','purple');
Broken into pieces, this means:
1. $(‘div’) selects all tags.
2. .css(‘outline’,’2px red solid’) adds a 2-pixel red outline
to the div.
3. .find(‘a’) then changes the selection from the div to
all of the tags inside the div.
4. .css(‘color’,’purple’) makes the text of all of the links
(not the div tag) purple.
When adding one of the DOM Traversal functions to the
chain, you alter the selection. For example, in the above
code, jQuery first selects the div, then halfway through
the chain, changes the selection to links inside the div. But
sometimes when you want to return the selection to its
original state. In other words, you want to select one thing,
then select another thing in relation to the first selection,
then return to the first selection. For example, say when a
visitor clicks a div that has an opacity of 50%, you want to
make the div fade to 100% opacity, change the color of the
headline inside the div, add a background color to each p
POWER USERS’ CLINIC
Putting an .end() to DOM Traversal
418 javascript & jquery: the missing manual
inside the div. One action—a click—needs to trigger several
actions on different elements of the page. One way to do
this would be like this:
$('div').click(function() {
$(this).fadeTo(250,1); // fade div in
$(this).find('h2').css('color','#F30');
$(this).find('p').
('backgroundColor','#F343FF');
}); // end click
Here’s a case where chaining would be really helpful—instead
of calling $(this) three times, you could call it once
and chain together the functions. However, you’d run into
trouble if you tried to chain the functions like this:
$('div').click(function() {
$(this).fadeTo(250,1)
.find('h2').css('color','#F30')
.find('p').('backgroundColor','#F343FF');
}); // end click
This might look right, but the problem occurs after the
.find(‘h2’)—which changes the selection from the div to
the h2 tag inside the div. When the next .find() function
runs—.find(‘p’)—jQuery tries to find p tags inside the h2 tag,
not inside the div. Fortunately, you can use jQuery’s .end()
function to “rewind” a changed selection back to its original
state. In the example above, you can use .end() to return
the selection back to the div, and then find the tags
inside the div like this.
$('div').click(function() {
$(this).fadeTo(250,1)
.find('h2').css('color','#F30').end()
.find('p').('backgroundColor','#F343FF');
}); // end click
Notice the .end() after the .css(‘color’, ‘#F30); this code
returns the jQuery selection back to the div so that the following
.find(‘p’) will find all tags inside the div.
www.it-ebooks.info