用相同的类包装相邻的元素

Question

我需要使用jQuery在div中使用相同的类包装相邻元素。到目前为止，我正在使用.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>

但是我需要将相邻的元素与单独的div 中的'image'类包装在'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做到这一点？

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

更新这是代码段的结果。