Databases
StackOverflow2013
Postsdbo
POHow to wrap every 3 child divs with html using jquery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to wrap every 3 child divs with html using jquery?
    text
    copied!<blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div">Wrap every 3 divs in a div</a> </p> </blockquote> <p>First thing, i know i should use a server side language to accomplish this not client side like jquery but that's not the point, i'm just trying to learn how to use it to manipulate html. Heres the html:</p> <pre><code>&lt;div class="items"&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="1.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="2.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="3.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 3&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="4.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="5.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 5&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="6.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I want to be able to wrap every 3 <code>&lt;divs&gt;</code> within the <code>&lt;div class="items"&gt;</code> with yet another div: <code>&lt;div class="row"&gt;&lt;/div&gt;</code>. So it end up like this:</p> <pre><code>&lt;div class="items"&gt; &lt;div class="row"&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="1.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 1&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="2.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 2&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="3.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 3&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="4.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 4&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="5.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 5&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="boxgrid"&gt;&lt;span class="cushycms"&gt;&lt;a href="#"&gt;&lt;img src="6.jpg" alt=""/&gt;&lt;/a&gt;&lt;/span&gt;&lt;div class="cover"&gt;&lt;span class="film_title"&gt;Title 6&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>How can i accomplish this with jquery's selectors? I thought i can use something like:</p> <pre><code>$("div.items:nth-child(3n)").wrap('&lt;div class="row"&gt;&lt;/div&gt;'); </code></pre> <p>But that doesn't work. Any ideas please? </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload