Wrap benachbarte Elemente mit der gleichen Klasse

Question

Ich muss benachbarte Elemente mit der gleichen Klasse in einem Div mit jQuery umbrechen. Bis jetzt verwende ich .wrapAll Funktion, um Elemente mit der gleichen Klasse in einem div zu wickeln.

HTML:

<a class="image"></a> 
<a class="image"></a> 
<a class="image"></a> 
<p>Some text</p> 
<a class="image"></a> 
<a class="image"></a> 

Script:

$("a.image").wrapAll("<div class='gallery'></div>"); 

Ausgang:

<div class='gallery'> 
    <a class="image"></a> 
    <a class="image"></a> 
    <a class="image"></a> 
    <p>Some text</p> 
    <a class="image"></a> 
    <a class="image"></a> 
</div> 

aber ich brauche die benachbarten Elemente mit 'Bild' Klasse in separaten divs wickeln mit 'galle y 'Klasse. Die Ausgabe muss also so aussehen:

<div class='gallery'> 
    <a class="image"></a> 
    <a class="image"></a> 
    <a class="image"></a> 
</div> 
<p>Some text</p> 
<div class='gallery'> 
    <a class="image"></a> 
    <a class="image"></a> 
</div> 

Gibt es eine Möglichkeit, dies mit jQuery zu tun?

Answer 1

1. Sie erhalten die nicht benachbarte Bilder (das erste und das man nur nach dem p) durch .not Funktion.
2. Für jede von ihnen sammeln Sie das angrenzende Bild mit (.nextUntil und andSelf).
3. Schließlich wickeln Sie sie alle .wrapAll

$('.image').not('.image+.image').each(function(){ 
 
    $(this).nextUntil(':not(.image)').andSelf().wrapAll('<div class="gallery" />'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="image">1</a> 
 
<a class="image">2</a> 
 
<a class="image">3</a> 
 
<p>Some text</p> 
 
<a class="image">4</a> 
 
<a class="image">5</a>

http://jsbin.com/gonino/edit?html,js

aktualisieren Dies ist das Ergebnis des Snippets verwenden.