Traversing DOM Elements with jQuery: Methods and Descriptions

Master DOM traversal in jQuery with methods like children(), each(), find(), and more. Efficiently navigate and manipulate DOM elements in your projects.

Traversing DOM Elements using jQuery

The jQuery library includes various methods to traverse DOM elements in a DOM hierarchy.

jQuery Traversing Methods

jQuery Methods Description
children() Get all the child elements of the specified element(s)
each() Iterate over specified elements and execute specified callback function for each element.
find() Get all the specified child elements of each specified element(s).
first() Get the first occurrence of the specified element.
next() Get the immediately following sibling of the specified element.
parent() Get the parent of the specified element(s).
prev() Get the immediately preceding sibling of the specified element.
siblings() Get the siblings of each specified element(s)

Traversing DOM Elements

Let's look at some of the important jQuery traversing methods.

jQuery each() Method

The each() method iterates over each specified element (specified using selector) and executes the callback function for each element.

Syntax

$('selector expression').each(callback function);
Output

Index:0, text: This is First paragraph.
Index:1, text: This is second paragraph.
Index:2, text: This is third paragraph.
Index:3, text: This is fourth paragraph.

jQuery children() Method

The children() method gets the child element of each element specified using the selector expression.

Syntax

$('selector expression').children();
Output

Index:0, html: <p>This is second paragraph.</p>
Index:1, html: <div id="inrDiv"><p>This is third paragraph.</p></div>
Index:2, html: <div><ul><li>First</li><li>Second</li><li>Third</li></ul></div>

jQuery find() Method

The find() method returns all the matching child elements of specified element(s).

Syntax

$('selector expression').find('selector expression to find child elements');
Output

Index:0, text: This is second paragraph.
Index:1, text: This is third paragraph.

jQuery next() Method

The next() method gets the immediately following sibling of the specified element.

Syntax

$('selector expression').next();
Output

Next element to #myDiv: <div><p>This is fourth paragraph.</p></div>
Next element to #inrDiv: <ul><li>First</li><li>Second</li><li>Third</li></ul>

jQuery parent() Method

The parent() method gets the immediate parent element of the specified element.

Syntax

$('selector expression').parent();
Output

Parent element of #inrDiv: <p>This is second paragraph.</p><div id="inrDiv"><p>This is third paragraph.</p></div><div><ul><li>First</li><li>Second</li><li>Third</li></ul></div>

jQuery siblings() Method

The siblings() method gets all siblings of the specified DOM element(s).

Syntax

$('selector expression').siblings();
Output

<div><br>
    <p>This is First paragraph.</p><br>
  </div><br>
  <div id="myDiv"><br>
    <p>This is second paragraph.</p><br>
  </div><br>
  <div id="inrDiv"><br>
    <p>This is third paragraph.</p><br>
  </div><br>
  <ul><br>
    <li>First</li><br>
    <li>Second</li><br>
    <li>Third</li><br>
  </ul>