CODEWITHSUNDEEP
htmljquery
Anta
Anta

Reputation: 151

Wrap elements in group until specific div

I am trying to wrap every group of elements with a same class under a wrapper delimitated by another specific element with different class.

If my code looks like this:

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <h2>heading2</h2>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <h2>heading2</h2>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
</div>

I essentially would like it to be like this:

<div class="container">
 <div class="wrapper">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
 </div>
  <h2>heading2</h2>
 <div class="wrapper">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
 </div>
   <h2>heading2</h2>
 <div class="wrapper">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
 </div>
</div>

I tried the next, which seems to work at some level and wraps it that way, but for some reason, each '.box' element gets wrapped individually too.

$(".box").each(function (index) {
    $(this).nextUntil("h2").addBack().wrapAll("<div class='wrapper' />");
});

Any idea how to avoid the elements to get wrapped too?

Thanks in advance,

Upvotes: 0

Views: 30

Answers (1)

MAYUR SANCHETI
MAYUR SANCHETI

Reputation: 162

i think below perfectly for your query, try it.

  1. use wrapall
  2. use for loop with length of box class

  var li = $(".box");

for(var i = 0; i < li.length; i+=4) {
  li.slice(i, i+4).wrapAll("<div class='wrapper'></div>");
}
//$('.box:nth-child(3n)').wrapAll('<div class="wrapper"></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 

<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <h2>heading2</h2>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <h2>heading2</h2>
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
</div>

Upvotes: 1

Related Questions