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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Including the jQuery 
        library's script -->
    <script src=
    </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!-- Including the jQuery 
        library's script -->
    <script src=
    </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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.