Learn jQuery: Navigating the DOM

                                
<div class="parent">

  <div class="child">Child 1</div>

  <div class="child">Child 2</div>

  <div class="child">Child 3</div>

</div>

// jQuery example:
$('.parent').children('.child'); // Selects all '.child' elements inside '.parent'
                              

                                
<div class="grandparent">

  <div class="parent">

    <div class="child">Child</div>

  </div>

</div>

// jQuery example:
$('.child').parent(); // Selects the '.parent' element
                              

                                
<ul>

  <li class="first">Item 1</li>

  <li class="second">Item 2</li>

  <li class="third">Item 3</li>

</ul>

// jQuery example:
$('.first').next(); // Selects '.second'
                              

                                
<ul id="shopping-list">

  <li class="item">Flour</li>

  <li class="item">Sugar</li>

</ul>

// jQuery example:
$('#shopping-list').find('.item'); // Selects all '.item' elements inside '#shopping-list'
                              

                                
<div class="container">

  <div class="box selected">Box 1</div>

  <div class="box">Box 2</div>

  <div class="box">Box 3</div>

</div>

// jQuery example:
$('.selected').siblings(); // Selects '.box' elements that are not '.selected'
                              

                                
<div class="grandparent">

  <div class="parent">

    <div class="child">Child</div>

  </div>

</div>

// jQuery example:
$('.child').closest('.grandparent'); // Selects '.grandparent'