Question

I have this HTML:

<div id="description">
  <h5>Title</h5>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

I want to insert, with jQuery, a parent element for all <p> elements, except the first one. So the HTML that I would like to generate is this:

<div id="description">
  <h5>Title</h5>
  <p>First paragraph</p>
  <div class="details">
    <p>Second paragraph</p>
    <p>Third paragraph</p>
  </div>
</div>

There’s the .wrap() function in jQuery that can add a parent, but if I use it like this:

$("#description p:not(:first)").wrap('<div class="details" />');

It wraps all my <p> individually.

Is there any way I can modify my selector to put my <div> around the “group” instead? Or maybe it’s easier using a different function that is yet unknown to me?

Thanks!

Answer 1

So you are looking for the .wrapAll() method.

$("#description p").not(":first").wrapAll('<div class="details" />');

Ref.: .wrapAll()