How to wrap every 3 child divs with html using jquery?

Question

Possible duplicate:
Wrap every 3 div in div

Firstly, I know that I have to use the server language to execute this non-client side, like jquery, but it’s not, I'm just trying to learn how to use it to control html. Heres html:

<div class="items"> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="1.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 1</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="2.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 2</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="3.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 3</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="4.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 4</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="5.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 5</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="6.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 6</span></div></div> </div> 

I want to be able to wrap every 3 <divs> in <div class="items"> another div: <div class="row"></div> . So this ends up like this:

 <div class="items"> <div class="row"> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="1.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 1</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="2.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 2</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="3.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 3</span></div></div> </div> <div class="row"> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="4.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 4</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="5.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 5</span></div></div> <div class="boxgrid"><span class="cushycms"><a href="#"><img src="6.jpg" alt=""/></a></span><div class="cover"><span class="film_title">Title 6</span></div></div> </div> </div> 

How can I accomplish this with jquery selectors? I thought I could use something like:

 $("div.items:nth-child(3n)").wrap('<div class="row"></div>'); 

But that does not work. Any ideas please?

Answer 1

I think what you really want is the range of divs between 1 and 3, and not just wrapping the third div, right?

You will need to use jquery slice to get the range.

Answer 2

Like a plugin:

 jQuery.fn.wrapInChunks = function(html, chunkSize) { chunkSize = chunkSize || 1; var items = this.get(), rows = [], cur = rows[0] = $(html); while (items[0]) { if (rows[rows.length - 1].children().length === chunkSize) { cur = rows[rows.length] = $(html); } cur.append( items.shift() ); } return this.pushStack(rows); }; $('.boxgrid').wrapInChunks('<div class="row" />', 3).appendTo('.items'); 

Answer 3

Use map (), slice () and wrapAll ();

  $(document).ready( function(){ var results =[]; var elements = $(".items").children('.boxgrid'); $.map( elements , function(i, n){ if( n%3 === 0 ){ results.push(n); } }); $.each( results , function(i,v){ elements.slice(v, v+3).wrapAll('<div class="row"></div>'); }); }); 

It is tested and works.

Answer 4

You will need to trim the elements and make the new div elements contain chopped elements. The following is sample code. I do not know a simpler method for this.

 $(".items").each(function() { var rowDiv = document.createElement("div"); $(rowDiv).addClass("row"); for(i=0; i< $(this).find("> .boxgrid").length ; i+= 3) { $(rowDiv).append( $(this).find("> .boxgrid").slice(i, i+3).clone() ); $(this).append(rowDiv); rowDiv = document.createElement("div"); $(rowDiv).addClass("row"); } $(this).find("> .boxgrid").remove();//Remove all the immediate boxgrid child elements. });