Tuesday, March 27, 2012

Solution to Chapter 2 Exercises of Learning jQuery 3rd Edition


Exercises:

1. Add a class of special to all of the <li> elements at the second level of the
nested list.

$(document).ready(function () {
    $('li.horizontal').find('li').addClass('special');
});



2. Add a class of year to all of the table cells in the third column of a table.


$(document).ready(function () {
    $('td:nth-child(3)').addClass('year');
});



3. Add the class special to the first table row that has the word Tragedy in it.

$(document).ready(function () {
    $('tr').children(':contains(Tragedy)').first().addClass('special');
});



4. Challenge: Select all of the list items (<li>s) containing a link (<a>). Add the
class afterlink to the sibling list items that follow the ones selected.

$(document).ready(function () {
    $('li:has(a)').nextAll().addClass('afterlink');
});



5. Challenge: Add the class tragedy to the closest ancestor <ul> of any
.pdf link.

$(document).ready(function () {
    $('a[href$=".pdf"]').closest('ul').addClass('tragedy');
});



This is how the webpage looks after applying the above jQuery:






  
Free Lessons for Chruch Pianists:
Free lessons, tips and downloads for church pianists

DVD Courses (Reharmonization, Play by Ear!, Arranging, Accompanying, Theory for Church Pianists, etc.):
Over 30 hours of DVD instruction for church pianists
 


Visit Vitabase for Quality Health Supplements


3 comments:

  1. $('li.special:has(a)').nextAll().addClass('afterlink');

    Looks better. There are no double lines with this.

    ReplyDelete
    Replies
    1. Hmm, li.special:has(a) didn't work in my browser (Safari). I was able to remove double lines for this challenge by using:

      $('li:has(a).nextUntil(li:has(a)).addClass('afterlink');


      Delete
  2. nice job man...
    at exercise 3 you have to add the class to the whole row not only to the cell...
    $('tr:contains(Tragedy)').first().addClass('special');

    ReplyDelete