Traversing DOM Elements using jQuery

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

The following table lists jQuery methods for traversing DOM elements.

jQuery Methods	Description
children()	Get all the child elements of the specified element(s)
each()	Iterate over specified elements and execute specified call back 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)

The following figure shows how the jQuery traversing methods get DOM elements.

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

jQuery each() Method

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

Syntax:

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

To begin, specify a selector to get the reference of elements and call each() method with callback function, which will be executed for each element.

Example: jQuery each() method

            
            $('p').each(function (index) {
        alert('index' + index + ', text: ' + $(this).text());
    });

<div>
    <p>This is First paragraph.</p>
</div>
<div id="myDiv">
    <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>
</div>
<div>
    <p>This is fourth paragraph.</p>
</div>
        
Try it 

Result:

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 jQuery children() method get the child element of each element specified using selector expression.

Syntax:

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

Elements returned from children() method can be iterated using each() method.

First, specify a selector to get the reference of an element(s) and call children() method to get all the child elements.

Example: jQuery children() method

            
            $('#myDiv').children().each(function (index) {
        alert('Index: ' + index + ', html: ' + $(this).html());
    });

<div>
    <p>This is First paragraph.</p>
</div>
<div id="myDiv">
    <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>
</div>
<div>
    <p>This is fourth paragraph.</p>
</div>
        
Try it 

Result:

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 jQuery find() method returns all the matching child elements of specified element(s).

Syntax:

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

Specify a selector to get the reference of an element(s) whose child elements you want to find and then call find() method with selector expression to get all the matching child elements. You can iterate child elements using each method.

Example: jQuery find() method

$('#myDiv').find('p').each(function(index){
            alert('index' + index + ', text: ' + $(this).text());
    });

<div>
    <p>This is First paragraph.</p>
</div>
<div id="myDiv">
    <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>
</div>
<div>
    <p>This is fourth paragraph.</p>
</div>
        
Try it 

Result:

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

jQuery next() Method

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

Syntax:

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

Specify a selector to get the reference of an element of which you want to get next element and then call next() method.

Example: jQuery next() method

            alert('Next element to #myDiv: ' + $('#myDiv').next().html());

alert('Next element to #inrDiv: ' + $('#inrDiv').next().html());

<div>
    <p>This is First paragraph.</p>
</div>
<div id="myDiv">
    <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>
</div>
<div>
    <p>This is fourth paragraph.</p>
</div>
        
Try it 

Result:

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 jQuery parent() method gets the immediate parent element of the specified element.

Syntax:

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

Specify a selector to get the reference of an element of which you want to get the parent element and then call parent() method.

Example: jQuery parent() method

alert('Parent element of #inrDiv: ' + $('#inrDiv').parent().html());

<div>
    <p>This is First paragraph.</p>
</div>
<div id="myDiv">
    <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>
</div>
<div>
    <p>This is fourth paragraph.</p>
</div>

Try it

Result:

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 jQuery siblings()method gets all siblings of the specified DOM element(s).

Syntax:

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

Specify a selector to get the reference of an element of which you want to get the siblings and call siblings() method.

Tips: you can iterate sibling elements using each() method.

Example: jQuery siblings() method

$('#myDiv').siblings().css({"color": "green", "border": "2px solid green"});

<div>
    <p>This is First paragraph.</p>
</div>
<div id="myDiv">
    <p>
        This is myDiv.
</div>
<div>
    <p>This is second paragraph.</p>
</div>

Try it

Visit Traversing methods reference to know all the traversing DOM methods.

Points to Remember :

The jQuery traversing methods allow you to iterate DOM elements in a DOM hierarchy.
Use the selector to get the reference of an element(s) and then call jQuery traversing methods to edit it.
Important DOM manipulation methods: each(), children(), find(), first(), parent(), next(), previous(), siblings() etc.