Wrap group of elements in multiple HTML elements using JQuery

Question

I need to add HTML into a page but I have no direct control over the HTML itself so am trying to use JQuery.

This is the existing, generated HTML (simplified):

<div class="curriculum>Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum>Content</div>
<div class="curriculum">Content</div>

Wherever the .testimonials appear, I need to group them all and wrap in HTML so the output looks like:

<div class="curriculum>Content</div>
<div class="curriculum">Content</div>

  <div>
    <div>
      <h2>Testimonials</h2>
      <div>

        <div class="testimonial">Content</div>
        <div class="testimonial">Content</div>
        <div class="testimonial">Content</div>

      </div>
    </div>
  </div>       

<div class="testimonial">Content</div>
<div class="curriculum>Content</div>
<div class="curriculum">Content</div>

Note that I need to add the 3 containing <div> tags and the <h2> (and the relevant closing tags) for styling reasons.

I was hoping to simply grab the first and last testimonials using .first().before and .last().after to add the HTML but JQuery adds the closing tags. I've also tried using JQuery's various .wrapAll, .before, .append but have had no luck for reasons I don't understand!

Other solutions on stackoverflow all seem to deal with wrapping the group of elements in a single <div> but I have trouble when trying to add the other <div>s and the <h2>

Does anybody have any advice how this could be achieved?

Possible duplicate of [jQuery wrap multiple div elements on same class](https://stackoverflow.com/questions/10896332/jquery-wrap-multiple-div-elements-on-same-class) — DaFois, Nov 10 '17 at 15:03

score 1 · Answer 1 · edited Nov 10 '17 at 16:35

I defined an id to the div so it will be easily found later.

Hope this helps:

$(document).ready(function () {

    $( ".testimonial" ).wrapAll( "<div id='testimonial'></div>" );

    $( "<h2>Testimonial</h2>" ).insertBefore( "#testimonial" );

});

body{
  background: gainsboro;
}
#testimonial{
  background:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>

score 0 · Accepted Answer · answered Nov 10 '17 at 15:11

This is probably easier if you don’t try to use wrapping methods ...

I would simply create the HTML structure for your wrapper in one go,

var $wrapper = $('<div><div><h2>Testimonials</h2><div></div></div></div>');

and insert that before the first .testimonial element:

$wrapper.insertBefore('.testimonial:first');

And then simply grab all .testimonial elements and append them to the innermost div element of the new structure we just created ...

$wrapper.find('div div').append($('.testimonial'));

Check the resulting DOM in this example, it should be what you want: https://jsfiddle.net/rjh4ybxr/1/

Thanks, a nice simple solution! – matt_50 Nov 13 '17 at 10:26 — matt_50, Nov 13 '17 at 10:26

score 0 · Answer 3 · answered Nov 10 '17 at 15:36

I came up with this for if there were multiple cases of testimonials that needed grouping.

//find testimonials that are preceeded by a curriculum
$('.curriculum + .testimonial').each(function(){
  var $firstTestimonial = $(this);
  //get the first testimonial and all the immediately following testimonials
  var $group = $firstTestimonial.add($firstTestimonial.nextUntil(':not(.testimonial)'));
  //create a replacement with a id for the target of where the group should go
  var $replacement = $('<div><div><h2>Testimonials</h2><div id="tempTarget"></div></div></div>');
  
  //put the replacement where the first testimonial was
  $firstTestimonial.replaceWith($replacement);
  //put all the testimonials in the group in the replacement, and then get rid of the temporary id
  $replacement.find('#tempTarget').append($group).removeAttr('id');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="testimonial">Content</div>
<div class="curriculum">Content</div>
<div class="curriculum">Content</div>

Wrap group of elements in multiple HTML elements using JQuery

3 Answers3