在使用jQuery的某個元素之後使用div包裝所有元素

Question

我試圖包裝出現在特定元素之後的所有Div。我如何使用jQuery來做到這一點？

目前代碼

<div class="a"></div> 
<div class="b"></div> 
<div class="b"></div> 

<div class="a"></div> 
<div class="b"></div> 
<div class="b"></div> 

<div class="a"></div> 
<div class="b"></div> 
<div class="b"></div> 

所需的輸出

<div class="a"></div> 
<div class="wrapper"> 
    <div class="b"></div> 
    <div class="b"></div> 
</div> 

<div class="a"></div> 
<div class="wrapper"> 
    <div class="b"></div> 
    <div class="b"></div> 
</div> 

<div class="a"></div> 
<div class="wrapper"> 
    <div class="b"></div> 
    <div class="b"></div> 
</div> 

Answer 1

你可以爲每個.a創建包裝元素中，添加的所有元素，直到下一個.a元素，然後添加到DOM。

$('.a').each(function() { 
 
    var wrap = $('<div class="wrapper"></div>'); 
 
    $(this).nextUntil('.a').appendTo(wrap); 
 
    $(this).after(wrap); 
 
})

.wrapper { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a">A</div> 
 
<div class="b">B</div> 
 
<div class="b">B</div> 
 

 
<div class="a">A</div> 
 
<div class="b">B</div> 
 
<div class="b">B</div> 
 

 
<div class="a">A</div> 
 
<div class="b">B</div> 
 
<div class="b">B</div>

Answer 2

如果總有2 .b，你可以使用下面的代碼：

$('.a').each(function() { 
 
    $(this).next('.b').next('.b').andSelf().wrapAll('<div class="wrapper"/>'); 
 
});

.wrapper { 
 
    border: 1px solid black; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a">A</div> 
 
<div class="b">B</div> 
 
<div class="b">B</div> 
 

 
<div class="a">A</div> 
 
<div class="b">B</div> 
 
<div class="b">B</div> 
 

 
<div class="a">A</div> 
 
<div class="b">B</div> 
 
<div class="b">B</div>