Can I Use JQuery .wrap Or .wrapInner To Wrap Around A Set Of Different Elements?

I have a HTML structure like so:

Solution 1:

To do this you can loop over each .blue element, get all the following siblings and call wrapAll() on them, like this:

$('.blue').each(function() {
  $(this).nextAll().wrapAll('<div class="extra-wrapper"></div>');
});

.extra-wrapper {
  border: 1px solid #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div>
    <div class="blue">blue</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
  <div>
    <div class="blue">blue</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
  <div>
    <div class="blue">blue</div>
    <div class="green">green</div>
    <div class="red">red</div>
  </div>
</section>

Note that I changed the <ele /> and <item /> element to divs as they were non-standard.

Share