Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • jQuery - Get Started
  • What is jQuery
  • jQuery - Environment Setup
  • Start using jQuery
  • jQuery - Selectors
  • jQuery - Methods
  • DOM Manipulation
  • Attributes Manipulation
  • Dimensions Manipulation
  • Traversing Elements
  • CSS Manipulation
  • Animation
  • Events
  • AJAX Introduction
  • AJAX Methods
  • Get Method
  • Post Method
  • Load Method
  • Selector Reference
  • DOM Manipulation Methods
  • Traversing Methods
  • Effects Methods
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

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 MethodsDescription
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.

Traversing 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.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.