Question

Hello I would like to use jQuery to wrap sets of elements in a div

HTML:

<h3>Title</h3>
<ul>
<li>Feature</li>
<li>Feature</li>
</ul>

<h3>Title</h3>
<ul>
<li>Feature</li>
<li>Feature</li>
</ul>

<h3>Title</h3>
<ul>
<li>Feature</li>
<li>Feature</li>
</ul>

Desired Result:

<div class="box">
    <h3>Title</h3>
   <ul>
    <li>Feature</li>
    <li>Feature</li>
    </ul>
    </div>

<div class="box">
    <h3>Title</h3>
   <ul>
    <li>Feature</li>
    <li>Feature</li>
    </ul>
    </div>

<div class="box">
    <h3>Title</h3>
   <ul>
    <li>Feature</li>
    <li>Feature</li>
    </ul>
    </div>

My question is similar to the following but I was unable to get the solution suggested by Russ Cam to work.

Wrap three repeating div groups into one using jQuery

Thanks in advance.

Answer 1

Try this:

$(document).ready(function(){
 $('h3').each(function(){
  $(this).add( $(this).next() ).wrapAll('<div class="box"></div>');
 })
})