CODEWITHSUNDEEP
jqueryhtmlcss
Jordash
Jordash

Reputation: 3093

Wrap a group of divs of various classes with another div in jQuery

I have a series of classes like this:

<div class="groupLabelHeader">Countertop Dimensions</div>
<div class="option1">Option</div>
<div class="option2">Option</div>
<div class="option3">Option</div>
<div class="groupDivider"></div>

I want to wrap all of the options pertaining to countertop dimensions inside of their own div, regardless of the html inside.

So it will look like this:

<div class="countertopDimensions">
    <div class="groupLabelHeader">Countertop Dimensions</div>
    <div class="option1">Option</div>
    <div class="option2">Option</div>
    <div class="option3">Option</div>
</div>
<div class="groupDivider"></div>

I tried the .wrapAll() but it wraps the div around each element rather than all of them.

Upvotes: 0

Views: 892

Answers (2)

Emre Erkan
Emre Erkan

Reputation: 8482

You can create .countertopDimensions div, insert it before .groupDivider and then move elements inside .countertopDimensions.

jQuery(function($) {
  var $wrapper = $('<div class="countertopDimensions"></div>');
  $('.groupDivider').before($wrapper);
  $('.groupLabelHeader,.option1,.option2,.option3').appendTo($wrapper);
});
.groupLabelHeader,.option1, .option2, .option3 {
  background: #ff0000;
}
.countertopDimensions .groupLabelHeader, .countertopDimensions .option1, .countertopDimensions .option2, .countertopDimensions .option3 {
  background: #ffff00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="groupLabelHeader">Countertop Dimensions</div>
<div class="option1">Option</div>
<div class="option2">Option</div>
<div class="option3">Option</div>
<div class="groupDivider"></div>

Upvotes: 1

Vijai
Vijai

Reputation: 2509

This works:

$("button").click(function(){
        $("div:not('.groupDivider')").wrapAll("<div class='hello'></div>");
    });

Upvotes: 0

Related Questions