jQuery Wie div um mehrere der gleichen Klassenelemente zu wickeln

Question

Ich versuche, mehrere gleiche Klasse divs in ein Div und mehrere Divs nicht mit der gleichen Klasse zu überspringen. .wrap kombiniert sie nicht und .wrapAll löst die nicht klassifizierten divs darunter aus. Ich habe herumgebastelt mit Versuchen, eine alternative Lösung zu erstellen, aber ohne Erfolg.

Original-

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

Gewünschtes Ergebnis

<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

Sie können Schleife ziemlich schnell durch Ihre <div> Elemente mit einer for Schleife. Im folgenden Code ändern Sie einfach den anfänglichen Selektor, um alle diese Geschwister divs, z. #content > div.entry oder wo auch immer sie sind:

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. Wir durchlaufen gerade die .entry<div> Elemente unter Verwendung .nextUntil(), um alle .entry Elemente zu erhalten, bis es eine .entry eins gibt, die die :not() selector verwendet. Dann nehmen wir die nächsten Elemente, plus das, mit dem wir begonnen haben (.andSelf()), und machen ein .wrapAll() für diese Gruppe. Nachdem sie eingepackt sind, überspringen wir entweder viele Elemente in der Schleife.

Answer 2

ich nur eine einfache custom solution peitschte.

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

Sie können auch neue divs an Ihr Markup anhängen und dann den gewünschten Inhalt anhängen.

Wenn Ihr Markup ist dies:

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

Verwenden Sie die folgenden zwei neuen divs anhängen (column-one und column-two) und dann den entsprechenden Inhalt in diese divs anhängen:

// 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 hier: http://codepen.io/zgreen/pen/FKvLH