Open the JavaScript console and follow these instructions to learn about jQuery's traversal methods.
After running each snippet of code, refresh the page.
body
element:
$('body').children().css('color', 'red');
find()
method to find the children elements of
the html
element that are p
elements:
$('html').find('p').css('color', 'red');
next()
method to find the sibling element that
immediately follows each of the h1
elements:
$('h1').next().css('color', 'red');
nextAll()
method to find all of the following
siblings of the h1
element:
$('h1').nextAll().css('color', 'red');
ol
element:
$('ol').parent().css('color', 'red');
ol
element:
$('ol').parents().css('color', 'red');
prev()
method to find the siblings of the
h1
element that immediately precede it:
$('h1').prev().css('color', 'red');
prevAll()
method to find all of the preceding
siblings of the ol
element:
$('ol').prevAll().css('color', 'red');
body
element:
$('body').siblings().css('color', 'red');
p
that follow an h1
element:
$('h1').nextAll('p').css('color', 'red');
Nice work!