Emballage plusieurs éléments enfants en place

Question

j'ai du code HTML qui est essentiellement identique à la suivante:

<div id="row-1" class="row"> 
    <div class="col1"></div> 
    <div class="col2"></div> 
    <div class="col3"></div> 
    <div class="col4"></div> 
    <div class="col5"></div> 
</div> 
<div id="row-2" class="row"> 
    <div class="col1"></div> 
    <div class="col2"></div> 
    <div class="col3"></div> 
    <div class="col4"></div> 
    <div class="col5"></div> 
</div> 
<div id="row-3" class="row"> 
    <div class="col1"></div> 
    <div class="col2"></div> 
    <div class="col3"></div> 
    <div class="col4"></div> 
    <div class="col5"></div> 
</div> 

Maintenant, je dois utiliser jQuery pour sélectionner col2, col3, col4 et envelopper une nouvelle paire div autour les pour générer html comme ceci:

<div id="row-n" class="row"> 
    <div class="col1"></div> 
    <div class ="wrapped-1"> 
     <div class="wrapped-2"> 
      <div class="col2"></div> 
      <div class="col3"></div> 
      <div class="col4"></div> 
     </div> 
    </div> 
    <div class="col5"></div> 
</div> 

J'ai quelques difficultés. Je l'ai essayé d'utiliser ceci:

$('div[id^="row-"]') 
    .children('.col2, .col3, .col4') 
    .wrapInner('<div class="wrapped-2" />') 
    .wrapInner('<div class="wrapped-1" />'); 

... qui donne le plus proche résultat à ce que je veux, mais je dois les étiquettes en dehors, par opposition à insérer dans les éléments sélectionnés. .wrapAll() semble simplement regrouper tous les éléments dans la première rangée et les dépouiller des lignes suivantes, ce qui est tout simplement faux.

Je suis relativement nouveau à jQuery donc toute aide et/ou conseil à ce sujet sera grandement apprécié!

Answer 1

En fait, la méthode qui devrait être utilisée dans ce cas est la méthode wrapAll, elle enveloppe tous les éléments sélectionnés avec l'élément spécifié (s), en utilisant la méthode each vous pouvez éviter cela, si seuls les enfants d'un élément spécifique sont enveloppés .

$('div[id^="row-"]').each(function() { 
    $(this).children('.col2, .col3, .col4') 
      .wrapAll('<div class="wrapped-1"><div class="wrapped-2"></div></div>'); 
}); 

http://jsfiddle.net/rVfp9/