jQuery DOM Traversing

1. Introduction

There are certain scenarios where we need to traverse through the DOM structure and then manipulate the desired HTML element. Below are some of the most commonly used jQuery functions that help in doing it.

  • parent() – traverses to the direct/immediate parent of the selected element
  • children() – traverses to the direct/immediate parent of the selected element
  • find() – searches within the selected DOM element
  • siblings() – gets all the siblings of the selected element
  • next() – gets the next sibling of the selected element
  • nextAll() – gets all the next sibling elements of the selected element
  • prev() – gets the previous sibling of the selected element
  • prevAll() – gets all the previous sibling elements of the selected element

2. Example Code

3. Output

jQuery Traversing output

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.