Оберните соседние элементы с тем же классом

Question

Мне нужно обернуть соседние элементы с тем же классом в div, используя jQuery. Пока я использую функцию .wrapAll, чтобы обернуть элементы с тем же классом в div.

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> 

Сценарий:

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

Выход:

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

Однако мне нужно обернуть соседние элементы с классом 'изображение' в отдельных дивы с 'галле y '. Таким образом, выход должен выглядеть следующим образом:

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

Есть ли способ сделать это с помощью jQuery?

Answer 1

1. Вы получаете несмежные изображения (первые и один раз после p), используя .not функции.
2. Для каждого из них вы собираете соседнее изображение, используя (.nextUntil и andSelf).
3. Наконец, вы обернуть их все с помощью .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

Update Это результат сниппета.