Оберните все элементы, используя div после определенного элемента, используя jQuery

Question

Я пытаюсь обернуть все Divs, которые появляются после определенного элемента. Как это сделать с помощью 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>