将相邻的具有相同类名的元素进行包裹

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>

但是我需要将具有'image'类的相邻元素用具有'gallery'类的单独div包装起来。因此输出需要像这样:

<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实现这个的方法？

- Anna

Answer 1

1. 使用.not函数获取非相邻图片（第一张和紧接着p后面的那张）。
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

更新：这是代码片段的结果。

- Mosh Feu