Comment emballer tous les 3 divs enfants avec html en utilisant jquery?

Question

Possible en double:
Wrap every 3 divs in a div

La première chose, je sais que je devrais utiliser un langage côté serveur pour ce faire non côté client comme jquery, mais ce n'est pas le point, je suis juste essayer d'apprendre à l'utiliser pour manipuler html. Heres le code 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> 

Je veux être en mesure de conclure tous les 3 <divs> dans le <div class="items"> avec une autre div: <div class="row"></div>. Donc, il se termine comme ceci:

<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> 

Comment puis-je accomplir cela avec les sélecteurs de jquery? Je pensais que je peux utiliser quelque chose comme:

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

Mais cela ne fonctionne pas. Des idées s'il vous plaît?

Answer 1

Je pense que ce que vous voulez réellement, c'est la gamme de divs entre 1 et 3, et pas seulement le troisième div, ouais?

Pour obtenir une plage, vous devez utiliser jquery slice.

Answer 2

Utilisez map(), slice() et 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>'); 
     }); 
    }); 

Ceci a été testé et fonctionne.

Answer 3

En tant que 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 4

Vous auriez à couper les éléments et faire de nouveaux éléments div pour contenir les éléments tranchés. Voici un exemple de code. Je ne connais pas de méthode plus simple pour le faire.

$(".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. 
});