Web Development with jQuery®

(Elliott) #1

(^52) ❘ CHAPTER 2 SELECTING AND FILTERING
Next, you create a reusable function that sets up some metadata, mostly as an intellectual exercise.
The metadata that you create provides a demonstration of jQuery’s various methods for working
with siblings as well as children, and the eq() method, which allows you to narrow a selection to
a single element based on its position offset from zero. Because the method is created inside the
function that executes when the document is ready, this method is available from within all the
other functions that you create inside the ready() function. The same is true of the variable you
created just previous to this called today.
var setUpThisWeek = function()
{
The fi rst thing you do in the function setUpThisWeek is to remove all the class names that are applied
later in this same function. You do this by selecting the elements inside of the

with
class name calendarMonth, and then calling jQuery’s removeClass() method. removeClass() can take
a single class name or several. If you provide more than one, you simply separate each individual
class name with a single space, just as you would if you were specifying class names using the
HTML class attribute. This, in turn, removes any of the specifi ed class names if they are present.
$('table.calendarMonth td').removeClass(
'calendarYesterday ' +
'calendarTomorrow ' +
'calendarEarlierThisWeek ' +
'calendarLaterThisWeek ' +
'calendarThisWeek'
);
Next, you create a variable that will contain a reference to yesterday, and that variable is called
yesterday. To capture which day is considered yesterday, you start with the day considered today,
which you captured previously. Then you move backward a single table cell to the previous day
using jQuery’s prev() method, which selects the element immediately preceding the element
(or elements) referenced by the current selection. In this case, you are working only with a single
element, but as with everything else jQuery can do, it will happily allow you to work with multiple
elements at the same time. If the selection had contained multiple elements, prev() would work on
them all, and it would provide you with a new selection that would provide all preceding adjacent
elements. You also provide a selector to prev(), which would limit the adjacent preceding element
to a
element. In the context of this example, you could easily have left off that selector and you
would have the same result. I have included it for two reasons: the fi rst to provide an example of
what it means to provide a selector to these methods, the second to make the code a little more intu-
itive and easier to follow. Because 'td' is specifi ed as the selector, that gives you as a programmer a
cue about what the code is doing and what it’s operating on.
var yesterday = today.prev('td');
If you’re writing a real calendar application, you need to take into account every possible situation
regarding where today might occur. It could happen at the beginning of a row or the end of a row.
If today occurs at the beginning of a row, then there will be no adjacent
element preceding the


element representing today. In this case the previous assignment to yesterday will be an empty
array, and it will have no length. This is how you check for the existence of a selection in jQuery.
[http://www.it-ebooks.info](http://www.it-ebooks.info)