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.

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.

• javascript
• jquery

Share Follow asked Apr 26, 2012 at 4:00 EdesaEdesa 59188 silver badges1616 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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/SAtrc/1/

Here you go:

http://api.jquery./wrap/ - Examples and usage included.

The sequence I'd probably use is first, insert the first div.row into the div#resizable, then start moving the inner divs you want into that div. Then, append another div.row and move the remaining inner divs into that one. Working on a fiddle to demonstrate, but this is the way I'd attack it.

here's the jsfiddle that does it: http://jsfiddle/rsPGv/

var $firstDiv = $('<div />').prependTo('div#resizable').addClass('row');
$('div div:nth-child(2)').appendTo($firstDiv);
$('div div:nth-child(2)').appendTo($firstDiv);
var $secondDiv = $('<div />').insertAfter($firstDiv).addClass('row');
$('div div:nth-child(3)').appendTo($secondDiv);
$('div div:nth-child(3)').appendTo($secondDiv);

You'll need to inspect the DOM through firebug or web dev tools to see the updated DOM. The code isn't very DRY and could undoubtedly be refactored to be more elegant, but this does acplish the task.

You can use jquery to select each child element of a parent element and then wrap them with any tag you want:

$('div.row > img').wrap('<div></div>');

You can refer these links if you need further clarification:

http://api.jquery./child-selector/

http://api.jquery./wrap/