javascript - jQuery 包装所有标题和下面的元素直到下一个标题

Question

我想将标题包括它下面的元素包装到一个 div 中，直到下一个标题。

我正在考虑遍历所有标题并获取所有元素直到最后一个元素。但我不知道如何正确执行它。

<h3>
   Login
</h3>
<p>asdadadadasd</p>
<h3>
    Register
</h3>
<p><strong>asdsadasdasd</strong></p>
<h4>
    test
</h4>
<p>dasdad</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>da</p>
<p>sd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>d</p>
<h4>
    another-under
</h4>
<p>asdas<br>
    das<br>
    da<br>
    sd<br>
    as<br>
    das<br>
    das<br>
    d<br>
    asd<br>
    asd<br>
    as<br>
    das<br>
    d<br>
    asd<br>
    as<br>
    das</p>
<h4>
    app-check-onrange
</h4>
<p><code>dasd</code></p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>das</p>
<p>d</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>d</p>

所以上面的代码会是这样的

    <div>
       <h3>Login</h3>
       <p>...</p>
       ...othercontent
    </div>
     <div>
       <h3>Register</h3>
       <p>...</p>
       ...othercontent
    </div>
    <div>
       <h4>test</h4>
       <p>...</p>
       ...othercontent
    </div>
    <div>
       <h4>another-under</h4>
       <p>...</p>
       ...othercontent
    </div>

Answer 1

您可以使用 nextUntil() 函数:

$('h3, h4').each(function(index, element) {
  $(this).nextUntil('h3, h4').addBack().wrapAll( "<div class='new' />");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>
  Login
</h3>
<p>asdadadadasd</p>
<h3>
  Register
</h3>
<p><strong>asdsadasdasd</strong></p>
<h4>
  test
</h4>
<p>dasdad</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>da</p>
<p>sd</p>
<p>asd</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>d</p>
<h4>
  another-under
</h4>
<p>asdas<br>
  das<br>
  da<br>
  sd<br>
  as<br>
  das<br>
  das<br>
  d<br>
  asd<br>
  asd<br>
  as<br>
  das<br>
  d<br>
  asd<br>
  as<br>
  das</p>
<h4>
  app-check-onrange
</h4>
<p><code>dasd</code></p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>das</p>
<p>d</p>
<p>asd</p>
<p>as</p>
<p>das</p>
<p>d</p>