在使用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>