Creating a set of div’s based on variable number of generated elements

Solution for Creating a set of div’s based on variable number of generated elements
is Given Below:

I’m attempting to create a set of div’s based on the number of iterations of an element.

The element created is an image and depending on the page there is a variable number generated by the server, contained in a parent div.

The HTML is:

<div id="thumbImageList">

<div class="thumbSlides">  //parent div
    
    <div class="col-3 col-md-3">  //child div that is generated
        <a href="#">
            <img src="img1.png">
        </a>
    </div>

    <div class="col-3 col-md-3">  //child div that is generated
        <a href="#">
            <img src="img2.png">
        </a>
    </div>
    
// Child Div repeated per number of images available.
</div>

</div>

The Child div’s need to be separated into groups of no more than 4. I was intending to do this with JS, maybe using an array, but have not been able to get anything to work so far.

Edit:
To be clear, the templated code is:


<div id="thumbImageList">

//parent div 
    <div class="thumbSlides"> 

[%THUMBNAILS%]
    [%param *body%]

//child div that is reproduced per the number of images available.
            <div class="col-3 col-md-3"> 
                <a href="javascript:;" rel="[@[email protected]]">
                    <img src="[@[email protected]]" class="img-fluid product-image-small">
                </a>
            </div>

    [%/ param%]
[%/ THUMBNAILS%]

    </div>
</div>

The template is parsed by the server before handing it off to the browser with the HTML structure provided above.

The sets of 4 images are intended to be inside a new iteration of the parent div. So the result would be:

<div id="thumbImageList">>

    <div class="thumbSlides">
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]1">
                    <img src="[@[email protected]]1" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]2">
                    <img src="[@[email protected]]2" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]3">
                    <img src="[@[email protected]]3" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]4">
                    <img src="[@[email protected]]4" class="img-fluid product-image-small">
            </a>
        </div>
  </div>
    <div class="thumbSlides">
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]5">
                    <img src="[@[email protected]]5" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]6">
                    <img src="[@[email protected]]6" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]7">
                    <img src="[@[email protected]]7" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@[email protected]]8">
                    <img src="[@[email protected]]8" class="img-fluid product-image-small">
            </a>
        </div>
  </div>

</div>

Update:
I have managed to create the required div’s thanks to Henry Manuel’s input. using the following:

    var w = document.getElementById('thumbImageList');

    var n = w.childElementCount / 4;

    for(var i=0; i<n; i++){
        $("#thumbImageList").append(
            '<div class="thumbSlides">'
        );                   
        
    };

Now from what I can see, I need to place the child div’s into the new parents.

Take this basic example and modify it based on what you need.

<html>
<body>
    
    <div id="idAttr">
        
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

    var n = 5;

    for(var i=0; i<n; i++){
      $("#idAttr").append(
        '<a href=""><img src="https://images.pexels.com/photos/5549976/pexels-photo-5549976.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a>'
      );                   
      
    };
</script>

note that var n = 5, this will represent the number of times you are getting from the server

I’ve solved this using a simple jQuery function:

    $("#thumbImageList div").slice(start, end,).wrapAll(
        '<div class="thumbSlides">'
    );   

Then I just iterate this string based on the number of images.