jQuery Tree Traversal Methods

Open the JavaScript console and follow these instructions to learn about jQuery's traversal methods.

After running each snippet of code, refresh the page.

1. Find all of the children of the body element:

   $('body').children().css('color', 'red');

2. Use the find() method to find the children elements of the html element that are p elements:

   $('html').find('p').css('color', 'red');

3. Use the next() method to find the sibling element that immediately follows each of the h1 elements:

   $('h1').next().css('color', 'red');

4. Use the nextAll() method to find all of the following siblings of the h1 element:

   $('h1').nextAll().css('color', 'red');

5. Find the parent of the ol element:

   $('ol').parent().css('color', 'red');

6. Find all of the ancestors of the ol element:

   $('ol').parents().css('color', 'red');

7. Use the prev() method to find the siblings of the h1 element that immediately precede it:

   $('h1').prev().css('color', 'red');

8. Use the prevAll() method to find all of the preceding siblings of the ol element:

   $('ol').prevAll().css('color', 'red');

9. Find all of the siblings of the body element:

   $('body').siblings().css('color', 'red');

10. Find all but the p that follow an h1 element:

    $('h1').nextAll('p').css('color', 'red');

Nice work!