Question

I am sure it’s not a specific jQuery question but I use it for realizing my task so I will describe what I need in context of jQuery and HTML.
I have a HTML page with divs that are generated by the server. They look like

<div class="image"><img src="image1.png" /></div>
<div class="image"><img src="image2.png" /></div>
...
<div class="image"><img src="imagen.png" /></div>

The count of the divs is variable and can be, for example, 40-50.
I take a collection of them with something like this: images = jQuery('.image');
Now I need to take every 9 divs from the collection and place them in a newly created container, for example, like this:

<div class="container1">
<div class="image"><img src="image1.png" /></div>
<div class="image"><img src="image2.png" /></div>
<div class="image"><img src="image3.png" /></div>
...
<div class="image"><img src="image9.png" /></div>
</div>

Then I need to take next 9 elements and place them in a similar newly created div, like this:

<div class="container2">
<div class="image"><img src="image10.png" /></div>
<div class="image"><img src="image11.png" /></div>
<div class="image"><img src="image12.png" /></div>
...
<div class="image"><img src="image18.png" /></div>
</div>

This way I need to take all elements and place them in newly created containers. In the end I will have a couple of containers holding 9 elements each. The last container, obviously, can have less elements if the total amount of image divs is not a multiple of 9.
I am not asking for a complete solution, but I need to realize the principle of taking each 9 elements from a collection.
Thanks.

Answer 1

FIX !

.. thank’s for all the reviews. This working version is built on approaches by patrick dw. Hope this helps..

var images = jQuery('.image');
for(i = 0; i < images.length / 9; i++) {
 jQuery('<div />', {
   id: 'conainter_' + i,
   html: images.slice(i*9, i*9+9)
 }).appendTo('body');
}

even though my initially answer was only meant to be a hint 😉