jQuery Traversing

The jQuery traversing is provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. The image below illustrates an HTML page as a tree (DOM tree).
jQuery Traversing

Illustration explained:

  • The <div> element is the parent of <ul>, and an ancestor of everything inside of it
  • The <ul> element is the parent of both <li> elements, and a child of <div>
  • The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>
  • The <span> element is a child of the left <li> and a descendant of <ul> and <div>
  • The two <li> elements are siblings (they share the same parent)
  • The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>
  • The <b> element is a child of the right <li> and a descendant of <ul> and <div>
Traversing the DOM Tree
jQuery provides a variety of methods that allow us to traverse elements in a DOM tree. The following table lists jQuery methods for traversing DOM elements :
Method Description
children() Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
each() Iterate over specified elements and execute specified call back function for each element.
filter() Reduce the set of matched elements to those that match the selector or pass the function's test
find() Searches for descendant elements that match the specified selectors.
first() Get the first element of the selected elements
last() Returns the last element of the selected elements
eq() Returns an element with a specific index number of the selected elements
next() Get the next sibling element of the selected element
parent() Get the direct parent element of the selected element
nextAll() Returns all next sibling elements of the selected element
nextUntil() Returns all next sibling elements between two given arguments
parents() Returns all ancestor elements of the selected element
parentsUntil() Returns all ancestor elements between two given arguments
prev() Returns the previous sibling element of the selected element
prevAll() Returns all previous sibling elements of the selected element
prevUntil() Returns all previous sibling elements between two given arguments
siblings() Get all sibling elements of the selected element
not() Remove elements from the set of matched elements