Andrejs Gubars Andrejs Gubars - 3 months ago 9
Javascript Question

Want to wrap all elements in one div from <h2> next Until another <h2>

So I'm having a small problem wrapping my

HTML
using
jQuery
from one
<h2>
tag to another
<h2>


This is quite similar to this, but the solution is not the same. jQuery: How to select "from here until the next H2"?

My problem is, that I want to wrap these elements as a whole.

Here is my
HTML
as an example.

<div class="info-hold">
<h2>Lorem</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
<h2>Lorem 2</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
<h2>Lorem 3</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>


Here is what I want to achieve:

<div class="info-hold">
<h2>Lorem</h2>
<div class="info-wrapper">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>
<h2>Lorem 2</h2>
<div class="info-wrapper">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>
<h2>Lorem 3</h2>
<div class="info-wrapper">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>
</div>


The html is there and I cannot modify it, I need a jQuery solution for this.

Thanks.

This is not a duplicate, since the problem is different!

Answer

use nextUtil then wrapAll

$('h2').each(function(){
  $(this).nextUntil('h2').wrapAll($('<div>', { class:'info-wrapper' }))
})
.info-wrapper{
  border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info-hold">
  <h2>Lorem</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
  <h2>Lorem 2</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
  <h2>Lorem 3</h2>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolore quae, quas ipsum illo magni vero quaerat quam ipsam iste autem quisquam, aperiam laudantium cumque, porro amet! Sint ipsa, laborum!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ab officiis nostrum modi aliquam, rem dicta deleniti provident sunt, libero nobis ea adipisci praesentium dolore fuga nesciunt iure at maiores!</p>
</div>