DOM Traversal Methods

[ 59 ]
Chapter 3
This chain searches for items with the class foo within the first list only and adds the
class some-class to them. Then .end() returns the object to its state before the call
to .find(), so the second .find() looks for .bar inside , not
just inside that list's , and adds the class another-class to the
matching element. The result is that items 1 and 3 of the first list have a class added
to them, and none of the items from the second list do.
A long jQuery chain can be visualized as a structured code block, with filtering
methods providing the openings of nested blocks and .end methods closing them:
$('#example-traversing-end ul.first').find('.foo')
.addClass('some-class')
.end()
.find('.bar')
.addClass('another-class');
.end();
The last .end() is unnecessary, as we are discarding the jQuery object immediately
thereafter. However, when the code is written in this form the .end() provides
visual symmetry and closure—making the program, at least to the eyes of some
developers, more readable.