Comment séparer le contenu avec jquery après un certain nombre de divs

Question

J'ai une forme comme ceci:

<div class="content"> 
    <form> 
    <div class="item"> 
     blablaform stuf 
    </div> 
    <div class="item"> 
     blablaform stuf 
    </div> 
    <div class="item"> 
     blablaform stuf 
    </div> 
    <div class="item"> 
     blablaform stuf 
    </div> 
    </form> 
</div> 

Maintenant, je veux envelopper quelques-unes des divs élément de forme à l'intérieur. Fondamentalement comme ceci:

<div class="content"> 
    <form> 
    <div class="wrapper"> 
     <div class="item"> 
     blablaform stuf 
     </div> 
     <div class="item"> 
     blablaform stuf 
     </div> 
    </div> 
    <div class="wrapper"> 
     <div class="item"> 
     blablaform stuf 
     </div> 
     <div class="item"> 
     blablaform stuf 
     </div> 
    </div> 
    </form> 
</div> 

Comment puis-je le faire avec jQuery? append()? :nth-child ou comment?

Merci.

Answer 1

Quelque chose comme cela fonctionne:

var elems = $(".content div.item"); 
for(var i = 0; i < elems.length; i+=2) { 
    elems.slice(i, i+2).wrapAll("<div class='wrapper'></div>"); 
} 

You can test it out here, ce que cela fait est de récupérer tous les .item<div> éléments là-dedans, et chaque paire de 2 leur enveloppe, s'il en reste plus (un dernier single un) il sera enveloppé par lui-même.

---

Ou, nous allons le rendre réutilisable, comme un plug-in:

jQuery.fn.wrapSet = function (interval, wrapElem) { 
    for(var i = 0; i < this.length; i+=interval) { 
    this.slice(i, i+interval).wrapAll(wrapElem); 
    } 
    return this; 
}; 

Ensuite, vous pouvez l'appeler comme ceci:

$(".content div.item").wrapSet(2, "<div class='wrapper'></div>");​ 

You can give that version a try here.