CODEWITHSUNDEEP
jquery
ajwerth
ajwerth

Reputation: 107

Wrapping multiple children with same class name in multiple divs jQuery

I am trying to us the jquery Method wrapAll to wrap multiple children with the same class name in multiple parents with the same class name, once the window size is less the 706.

I want to go from this. 

<div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

<div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

<div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

To this.

<div>
  <div>
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
</div>

<div>
  <div>
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
</div>

<div>
  <div>
    <div class="a"></div>
    <div class="b"></div>
  </div>
  <div class="c"></div>
</div>

Heres my jQuery

  if ($(window).width() < 705) {
   $( ".a,.b" ).wrapAll( "<div class='a-b'></div>" );
  }
  else {

  }

Do I need to give them all individual class names and create 3 different wrapAll methods? Or is there a way I can do it all with one method/function?

Upvotes: 1

Views: 1777

Answers (2)

charlietfl
charlietfl

Reputation: 171698

Isolate the parent instances and look inside each one for the groups to wrap

$('.list').each(function(){
 $(this).find( ".a,.b" ).wrapAll( "<div class='a-b'></div>" );
})
.a-b{border:1px solid green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div class="a">A item</div>
  <div class="b">B item</div>
  <div class="c">C Item</div>
</div>
<div class="list">
  <div class="a">A item</div>
  <div class="b">B item</div>
  <div class="c">C Item</div>
</div>
<div class="list">
  <div class="a">A item</div>
  <div class="b">B item</div>
  <div class="c">C Item</div>
</div>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337733

To achieve this you could loop over all the .a elements, get their sibling .b, then use wrapAll() to contain them within another div, like this:

$('.a').each(function() {
  var $b = $(this).next('.b');
  $(this).add($b).wrapAll('<div />');
});
/* this is just to make the div structure more obvious in the output */
div { 
  border: 1px solid #CCC; 
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

<div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

<div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

Upvotes: 1

Related Questions