Question

I have a div tag that contains inner div tag tags. How can I add open and close tag around the x number of div tags.

E.x.

    <div id="resizable">
        <div><img class="img1 image" src="images/lion5.jpg" /></div>
        <div><img class="img2 image" src="images/lion1.jpg"/></div>
        <div><img class="img2 image" src="images/lion2.jpg"/></div>
        <div><img class="img2 image" src="images/lion3.jpg"/></div>
    </div>

Add transform the codes into:

<div id="resizable">
    <div class="row">
        <div><img class="img1 image" src="images/lion5.jpg" /></div>
        <div><img class="img2 image" src="images/lion1.jpg"/></div>
    </div>
    <div class="row">
        <div><img class="img2 image" src="images/lion2.jpg"/></div>
        <div><img class="img2 image" src="images/lion3.jpg"/></div>
    </div>
</div>  

Hope anyone can tell me a script to do this dynamically.

Answer 1

Completing @Derek answer, you can loop aroud a .slice() and use .wrapAll() to finish the work.

var c = $('#resizable').children();

for (var i = 0 ; i < c.length ; i+=2) {
    c.slice(i,i+2).wrapAll('<div class="row"></div>');
}​

Demonstration: http://jsfiddle.net/SAtrc/1/