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
$('li.special:has(a)').nextAll().addClass('afterlink');
ReplyDeleteLooks better. There are no double lines with this.
Hmm, li.special:has(a) didn't work in my browser (Safari). I was able to remove double lines for this challenge by using:
Delete$('li:has(a).nextUntil(li:has(a)).addClass('afterlink');
nice job man...
ReplyDeleteat exercise 3 you have to add the class to the whole row not only to the cell...
$('tr:contains(Tragedy)').first().addClass('special');