如何选择两个相同元素之间的所有元素？

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>