如何選擇兩個相同元素之間的所有元素？

Question

在div-container中，我想選擇所有標題及其內容，直到下一個標題為止。 這些塊應具有不同的背景顏色。

這是我在我的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>