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

Мне нужно обернуть соседние элементы одним классом в 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>

Script:

$( "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>

Однако мне нужно обернуть элементы рядом классом 'image' в отдельные divs с классом 'galley'. Поэтому вывод должен выглядеть следующим образом:

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

Ответы

Ответ 1

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