How to wrap the nth to nth element in a div

Question

I have this:

<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>
<div class="myTest"></div>

and I am trying to get:

<div class="holder">
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
</div>
<div class="holder">
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
    <div class="myTest"></div>
</div>

using jQuery. I have tried using nth-child, but then it wraps every element with that div instead.

I am trying to get every 5 elements into a div called holder.

Although that, I am trying to use "nth to nth" element approach. In other words, it is NOT an assumption that every 5 element is wrapped, but rather 1st-to-5th element wrapped in one div, and perhaps 6th-to-14th element in another. And let's assume these 2 batches are both wrapped with the same class, holder.

Any dynamic way to batch these up?

http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div use this link — Salah Nour ElDin, Apr 14 '16 at 11:05

Rajaprabhu Aravindasamy · Accepted Answer · 2016-04-14T11:05:44.470

4

You can do it by using each() and wrapAll(),

var tmp = $();
$(".myTest").each(function(i){
  tmp = tmp.add(this);
  if(((i+1) % 5) == 0){ 
    tmp.wrapAll("<div class='holder'>"); 
    tmp = $(); 
  }
});

DEMO

edited Apr 14 '16 at 11:05

answered Apr 14 '16 at 11:00

Rajaprabhu Aravindasamy

66,513
17
101
130

`.holder { border:1px solid black; }` will make it appear better! – Rayon Apr 14 '16 at 11:04
2

Good one! Have never encountered this method earlier :) – Rayon Apr 14 '16 at 11:06
This nailed it!! Although, if you could have a look at my edit and give another approach, that would completely win this question. Thanks loads :) – Sina Apr 14 '16 at 11:13
@Sina Can you explain about your new requirement a bit? I cannot understand. – Rajaprabhu Aravindasamy Apr 14 '16 at 11:17
What if I want to have a random pattern of the same class `divs`s to be wrapped together e.g. from **6th-to-14th** element. While that, keep your current answer for the case where there is a certain pattern (every 5 in our case). – Sina Apr 14 '16 at 11:20
@Sina How will you supply that random pattern via an array or something? – Rajaprabhu Aravindasamy Apr 14 '16 at 11:23
Nope it's just a random number as my intention. I would want to wrap 6th-to-14th element all together. Feel free to take any other example. – Sina Apr 14 '16 at 11:25
@Sina You can do it like https://jsfiddle.net/jrv36gme/3/ – Rajaprabhu Aravindasamy Apr 14 '16 at 11:32
Thanks mate! nailed it :) – Sina Apr 14 '16 at 13:01

How to wrap the nth to nth element in a div

1 Answers1

DEMO