How to iterate through child elements of a div using jQuery ? - GeeksforGeeks

03 Aug, 2021
jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following example.
Example 1: The sample HTML page contains a “container” div having some child elements. Looping is done throughout all the child elements of the “container” div and then copied them to the “output-container” div which initially had no child elements.
<!DOCTYPE html><html>  <head>    <!-- Including the jQuery         library's script -->    <script src="https://code.jquery.com/jquery-3.5.1.min.js">    </script></head>  <body style="text-align: center;">    <h1 style="color: #008000">        GeeksforGeeks    </h1>    <hr>      <u>This is the "#container" div</u>      <div id="container">        <div>            Child            <div>                Grandchild            </div>        </div>    </div>      <u>This is the "#output-container" div</u>    <div id="output-container"></div>      <script>        // loop through the child elements        // of the "#container" div        $("#container").children()                .each(function () {              // "this" is the current child            // in the loop grabbing this             // element in the form of string            // and appending it to the             // "#output-container" div            var element = $(this)                    .prop('outerHTML');              $("#output-container")                    .append(element);        });    </script></body>  </html>
Output:
Example 2: In the above example, looping is implemented through all the child elements. But if it is required to loop for some specific child elements or elements with some specific class or id, then it is passed as an argument to the children() function as demonstrated below.
<!DOCTYPE html><html>  <head>    <!-- Including the jQuery         library's script -->    <script src="https://code.jquery.com/jquery-3.5.1.min.js">    </script></head>  <body>    <h1 style="color: #008000">        GeeksforGeeks    </h1>    <hr>      <h3>This is the "#container" div</h3>      <div id="container">        <em>Lorem Ipsum</em><br>        <strong id="name">            Lorem Ipsum        </strong><br>          <u class="uname">Lorem Ipsum</u>    </div>    <br>      <h3>Selecting the 'em' element</h3>    <div id="em-container"></div>      <h3>        Selecting the element         with id "name"    </h3>    <div id="name-container"></div>      <h3>        Selecting the element         with class "uname"    </h3>    <div id="uname-container"></div>      <script>          // looping over the child 'em'         // elements of the "#container" div        $("#container").children('em').each(function()        {            var element = $(this).prop('outerHTML');            $("#em-container").append(element);        });          // looping over the child elements of        // the "#container" div having id as "name"        $("#container").children('#name').each(function()        {            var element = $(this).prop('outerHTML');            $("#name-container").append(element);        });          // looping over the child elements of        // the "#container" div having class as "uname"        $("#container").children('.uname').each(function()        {            var element = $(this).prop('outerHTML');            $("#uname-container").append(element);        });    </script></body>  </html>
Output:
The above example demonstrates all the three cases, looping over specific child elements, looping over child elements with a specific id, and looping over child elements with a specific class.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)