时间戳

首页 > 解决方案 > jQuery包装所有标题和下面的元素，直到下一个标题

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

问题描述

我想将包含下面元素的标题包装到一个 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>

标签： javascriptjquerycss

解决方案

您可以使用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>

推荐阅读