jQuery Comment faire pour diver autour de plusieurs des mêmes éléments de classe

Question

J'essaie d'envelopper plusieurs divs de même classe dans un div et d'ignorer divs pas avec la même classe. .wrap ne les combine pas, et .wrapAll jette les divs non-classées dessous. J'ai bricolé avec des tentatives de créer une solution alternative, mais sans succès.

originale

<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div>Skip in wrap</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 

continued... 

Résultat Recherché

<div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
</div> 
<div>Skip in wrap</div> 
<div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
<div class="entry">Content</div> 
</div> 

Answer 1

Vous pouvez faire une boucle assez rapidement grâce à vos <div> éléments en utilisant une boucle for. Dans le code ci-dessous, il suffit de changer le sélecteur initial ici pour saisir tous ces divs frères et soeurs, par exemple. #content > div.entry ou là où ils sont:

var divs = $("div.entry"); 
for(var i=0; i<divs.length;) { 
    i += divs.eq(i).nextUntil(':not(.entry)').andSelf().wrapAll('<div />').length; 
}​ 

You can give it a try here. Nous sommes en train de boucler, les éléments .entry<div> en utilisant .nextUntil() pour obtenir tous les éléments .entry jusqu'à ce qu'il y ait un non .entry en utilisant le . Ensuite, nous prenons les éléments suivants, plus celui que nous avons commencé avec (.andSelf()) et faire un .wrapAll() sur ce groupe. Une fois qu'ils sont emballés, nous laissons de côté tant d'éléments dans la boucle.

Answer 2

Je viens fouetté un custom solution simple.

var i, wrap, wrap_number = 0; 
$('div').each(function(){ //group entries into blocks "entry_wrap_#" 
    var div = $(this); 
    if (div.is('.entry')) { 
     wrap = 'entry_wrap_' + wrap_number; 
     div.addClass(wrap); 
    } else { 
     wrap_number++; 
    } 
}); 
for (i = 0; i <= wrap_number; i++) { //wrap all blocks and remove class 
    wrap = 'entry_wrap_' + i; 
    $('.' + wrap).wrapAll('<div class="wrap"/>').removeClass(wrap); 
} 

Answer 3

Vous pouvez également ajouter de nouvelles divs à votre balisage, puis ajouter le contenu que vous voulez envelopper dans ceux-ci.

Si votre balisage est la suivante:

<div class="wrap"> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-1"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
    <div class="col-2"></div> 
</div> 

Utilisez les commandes suivantes pour ajouter deux nouveaux divs (column-one et column-two), puis ajoutez le contenu approprié dans ces divs:

// Set vars for column content 
var colOne = $('.col-1').nextUntil('.col-2').addBack(); 
var colTwo = $('.col-2').nextAll().addBack(); 

// Append new divs that will take the column content 
$('.wrap').append('<div class="column-first group" /><div class="column-second ground" />'); 

// Append column content to new divs 
$(colOne).appendTo('.column-first'); 
$(colTwo).appendTo('.column-second'); 

Demo ici: http://codepen.io/zgreen/pen/FKvLH