Dans une liste, enroulez chaque groupe d'image et le suivant ... (jQuery)

Question

Je ne peux pas atteindre mon objectif malgré tout ce que j'ai lu. Désolé si la question a déjà été posée. Je veux envelopper chaque groupe d'image et suivant div, comme dans l'exemple:

<div class="group"> 

    <img class="slide" src="..."> 
    <div class="content">...</div> 

    <img class="slide" src="..."> 
    <div class="content">...</div> 

    <img class="slide" src="..."> 
    <div class="content">...</div> 

    ... 

</div> 

à

<div class="group"> 

    <div class="subgroup"> 
     <img class="slide" src="..."> 
     <div class="content">...</div> 
    </div> 

    <div class="subgroup"> 
     <img class="slide" src="..."> 
     <div class="content">...</div> 
    </div> 

    <div class="subgroup"> 
     <img class="slide" src="..."> 
     <div class="content">...</div> 
    </div> 

    ... 

</div> 

Merci par avance ...

Answer 1

essayer cette

$(".group .slide").each(function(){ 
    $(this).next(".content").andSelf().wrapAll("<div class='subgroup' />"); 
}); 

Working Demo

Answer 2

Vous pouvez obtenir tous les éléments de diapositives et de contenu. puis trancher tableau retourné pour former un ensemble d'élément, puis l'envelopper dans un même groupe:

var childelements = $(".group > .slide , .group > .content"); 
for(var i = 0; i < childelements.length; i+=2) { 
    childelements.slice(i, i+2).wrapAll('<div class="subgroup"></div>'); 
} 

Working Demo