Encapsulate a set of divs with another div in jQuery

Question

I am a little stumped with how to do this.

I am using jQuery and wish to encapsulate certain sets of divs with a div.

For example I have:

<div id="groups">  
    <div class="group-1">x</div>
    <div class="group-1">x</div>
    <div class="group-2">x</div>
    <div class="group-2">x</div>
    <div class="group-3">x</div>
</div>

And wish to end up with:

<div id="groups">  
  <div id="set-1">
    <div class="group-1">x</div>
    <div class="group-1">x</div>
  </div>
  <div id="set-2">
    <div class="group-2">x</div>
    <div class="group-2">x</div>
  </div>
  <div id="set-3">
    <div class="group-3">x</div>
  </div>
</div>

I am able to cycle through each div and add a div around each one but not the way I want above. Any advice appreciate.

Thanks.

Answer 1

See .wrapAll()

$(".group-1").wrapAll('<div id="set-1" />');
$(".group-2").wrapAll('<div id="set-2" />');
$(".group-3").wrapAll('<div id="set-3" />');

If you need the selector to match classes inside the #groups div only, use the child selector, e.g. $('#groups > .group-1')