如何使用.nextUntil将两个不同的类添加到<h2>元素</h2>列表中

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/

Answer 2

尝试这种方法：

使用$(".container h3:first").nextUntil("h3", "h2")获取特定元素范围并仅获取h2元素。 对于第二种情况，使用nextUntil("h2:last", "h2")来完成同样的事情而没有你想要的最后一个：

＆＃13;

＆＃13;

$(".container h3:first").nextUntil("h3", "h2").each(function(index, element) {
  $("<div class='one'></div>").insertBefore($(this));
});

$(".container h3:eq(1)").nextUntil("h2:last", "h2").each(function(index, element) {
  $("<div class='two'></div>").insertBefore($(this));
});

alert($(".container").html());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

这里的游乐场：http://jsfiddle.net/jpqnaL48/

Answer 3

尝试

var container = $(".container")
, one = $("<div class=one>")
, two = $("<div class=two>");
container.find("h3:eq(0)")
.nextUntil("h3", "h2").before(one)
.nextUntil("h2:last", "h2:not(.one + h2)").before(two);

var container = $(".container")
, one = $("<div class=one>")
, two = $("<div class=two>");
container
.find("h3:eq(0)").nextUntil("h3", "h2").before(one)
.nextUntil("h2:last", "h2:not(.one + h2)").before(two);
$("<pre>").text(container.html()).prependTo("body")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>