Как выбрать все элементы между двумя одинаковыми элементами?

Question

в div-контейнере Я хочу выбрать и сгруппировать все заголовки с его содержимым до следующего заголовка. Эти блоки должны иметь другой фоновый цвет.

Это то, что я получил в моем HTML:

<div class="container"> 
    <h2></h2> 
    <p></p> 
    <p></p> 
    <ul></ul> 
    <h2></h2> 
    <p></p> 
    <p></p> 
    <p></p> 
    <h2></h2> 
    <p></p> 
    <p></p> 
    <p></p> 
</div> 

И что мне нужно это:

<div class="container"> 
    <div class="xy"> 
     <h2></h2> 
     <p></p> 
     <p></p> 
     <ul></ul> 
    </div> 
    <div class="xy"> 
     <h2></h2> 
     <p></p> 
     <p></p> 
     <p></p> 
    </div> 
    <div class="xy"> 
     <h2></h2> 
     <p></p> 
     <p></p> 
     <p></p> 
    </div> 
</div> 

Я попытался с помощью nextUntil(), но это не работает для меня до сих пор ,

Буду признателен за любую помощь.

Бест, Робин

Answer 1

Это делает трюк:

$('.container h2').each(function() { //for each h2 
 
    $(this) 
 
    .nextUntil('h2')     //get siblings until next h2, or all next siblings if no more h2 
 
    .addBack()       //include current h2 
 
    .wrapAll('<div class="xy"/>');  //wrap it 
 
}); 
 

 
$('pre').text($('.container').html()); //show it!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <h2></h2> 
 
    <p></p> 
 
    <p></p> 
 
    <ul></ul> 
 
    <h2></h2> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
    <h2></h2> 
 
    <p></p> 
 
    <p></p> 
 
    <p></p> 
 
</div> 
 
     
 
<pre></pre>