用相同的類包裝相鄰元素

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 'galle。' 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

更新這是片斷的結果。