jQuery Traversing

Traversing means navigating through the HTML DOM tree — moving from one element to its parent, children, or siblings. jQuery provides a rich set of traversal methods that make it easy to find related elements based on their position in the page structure.

What is Traversing?

The DOM is structured like a family tree. Every element has a parent, possibly children, and possibly siblings.

Parent — The element directly above (wrapping) the current element
Children — Elements directly inside the current element
Siblings — Elements at the same level, with the same parent
Descendants — All elements nested inside, at any depth
Ancestors — All elements wrapping the current element, going upward

parent() and parents()

parent()

Selects the direct parent of the selected element.

<div id="container">
  <p id="child">Paragraph inside a div.</p>
</div>

<script>
$(function() {
  $("#child").parent().css("border", "2px solid red");
  // Adds border to #container
});
</script>

parents()

Selects all ancestor elements, all the way up to <html>. An optional selector can filter results.

$("#inner").parents("div");    // All ancestor divs

closest()

Travels upward and returns the first matching ancestor. It starts with the element itself, then checks parents.

$("input").click(function() {
  $(this).closest("form").css("border", "2px solid green");
});

closest() is more precise than parents() because it stops at the first match.

children() and find()

children()

Selects the direct children of an element. An optional selector filters results.

$("ul#navMenu").children();             // All direct children
$("ul#navMenu").children("li.active"); // Only active direct children

find()

Searches through all descendants (not just direct children) and returns matches.

$("#article").find("span").css("color", "blue");

children() vs find()

children() — Only one level deep (direct children)
find() — All levels deep (all descendants)

siblings()

Selects all siblings of the selected element (elements at the same level with the same parent).

$("li.active").siblings().css("opacity", "0.5");

next() and prev()

Select only the immediately adjacent sibling.

$("#step1").next().show();    // Element immediately after #step1
$("#step3").prev().hide();    // Element immediately before #step3

nextAll() and prevAll()

$("li.active").nextAll().addClass("upcoming");

nextUntil() and prevUntil()

Select siblings between two points, stopping before the specified element.

$("#monday").nextUntil("#friday").addClass("midweek");

Filtering in Traversal

first(), last(), eq()

$("li").first().addClass("first-item");
$("li").last().addClass("last-item");
$("li").eq(2).css("font-weight", "bold");    // 3rd item

filter() and not()

$("li").filter(".featured").css("color", "gold");
$("li").not(".disabled").click(function() {
  alert("Clicked: " + $(this).text());
});

Practical Example: Accordion Menu

<ul id="accordion">
  <li>
    <h4>Section 1</h4>
    <p>Content for section one.</p>
  </li>
  <li>
    <h4>Section 2</h4>
    <p>Content for section two.</p>
  </li>
</ul>

<script>
$(function() {
  $("#accordion li p").hide();

  $("#accordion h4").click(function() {
    $(this).next("p").slideToggle(300);
  });
});
</script>

Key Points

Traversal methods navigate the DOM relative to a starting element.
parent() goes up one level; parents() goes all the way up.
children() goes one level down; find() goes all levels down.
siblings() selects all elements at the same level.
next() and prev() select the immediately adjacent sibling.
filter() and not() narrow down an existing selection.

Previous lessons

Back to courses

Next lessons