javascript - 如何使用 .nextUntil 添加两个不同的类到

Question

如何在第一个 h3 之后但在下一个 h3 之前的所有 h2 元素之前添加类“one”，以及如何在第二个 h3 元素之后但不是最后一个 h2 的所有 h2 元素之前添加类“two”元素。

假设以下 HTML:

<div class="container">
    <h2></h2>
    <h2></h2>
    <h2></h2>
        <h3></h3> 
    <h2></h2> 
    <br></br>
    <h2></h2> 
    <p></p>
    <h2></h2> 
        <h3></h3> 
    <h2></h2> 
    <p></p>
    <h2></h2>   
    <h2></h2>
</div>

如何使用类似的东西(带或不带 .nextUntil)

$( ".container .h3:first" )
    .nextUntil( ".h3" )
.after($('<div class="one"></div>'));

$( ".container .h3:nth-of-type(2)" )
    .nextUntil( ".h2:eq(-2)" )
.after($('<div class="two"></div>'));

目标:

<div class="container">
    <h2></h2>
    <h2></h2>
    <h2></h2>
        <h3></h3> 
    <div class="one"></div>
    <h2></h2> 
    <br></br>
    <div class="one"></div>
    <h2></h2>     
    <p></p>
    <div class="one"></div>
    <h2></h2> 
        <h3></h3> 
    <div class="two"></div>
    <h2></h2> 
    <div class="two"></div>
    <h2></h2> 
    <p></p>
    <div class="two"></div>
    <h2></h2> 
    <h2></h2>
</div>

Answer 1

您的代码几乎完成了。您只需要将 h2 选择器添加到 nextUntil 方法来选择 h2 元素。此外，您可能还想使用 h2:eq(-1) 和 before:

$('.container h3:first').nextUntil('h3', 'h2').before('<div class="one"></div>');
$('.container h3:nth-of-type(2)').nextUntil('h2:eq(-1)', 'h2').before('<div class="two"></div>');

演示:http://jsfiddle.net/t1d3eeat/