Filtering a Selection (^) ❘ 57
The day is then assigned to selectedDay, where it will persist and remain until the next click
event occurs.
selectedDay = day;
The selected day then receives the class name calendarDaySelected, and then its parent
element
also receives the class name calendarWeekSelected.
selectedDay
.addClass('calendarDaySelected')
.parent('tr')
.addClass('calendarWeekSelected');
Then you travel up the DOM from the selected day all the way to the element’s ancestor
element. You go from there to fi nd the with class name calendarDay, which is then
assigned text content. That in turn places the selected day in the calendar header in date format,
for example, November 23, 2013. The call to day.text() returns the text content of the selected
day; in this case this is the number representing the day of the month, and that is appended to a
string containing a comma and a space. The parents() method is used to go from an element to
that element’s parent or ancestor, allowing you to go all the way up the DOM tree to the root
element. The selector that you provide to parents() tells the parents() method what element or
elements you want to include as you travel up the DOM tree. If you were to also include the jQuery
proprietary :first pseudo-class in that selector, such as, table.calendarMonth:first, this would
also trigger the parents() method to halt the search when it comes to the fi rst element that matches
the provided selector, and it would therefore also provide you with better performance than the
selector that I used, which causes jQuery to examine the entire DOM ancestry so that it is sure it
has matched every possible element.
day.parents('table.calendarMonth')
.find('span.calendarDay')
.text(day.text() + ', ');
}
)
The next event that you create is a double-click event using jQuery’s dblclick() method. Creating
this event enables you to change the day that is considered to be today.
.dblclick(
function()
{
To change the element considered to be today, you fi rst remove the class name calendarToday from
the present element with that moniker. You assign the double-clicked | element to today.
You add the class name calendarToday to the new element.
today.removeClass('calendarToday');
today = $(this);
today.addClass('calendarToday');
Then you call setUpThisWeek() again to recalculate which days are considered yesterday, tomorrow,
earlier this week, later this week, and this week.
[http://www.it-ebooks.info](http://www.it-ebooks.info)
| |
