Converting "i+=n" for-loop to $.each

Question

I have the below html structure:

<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>

Now to group/wrap each 4 items in a separate div I did as below:

var div=$('.thumbnail');
for(var i = 0; i < div.length; i+=4) {
  div.slice(i, i+4).wrapAll("<div class='new'></div>");
};

My question - Is there any way to convert this specific loop into $.each or is for loop only the way to do this?

UPDATE

This ain't duplicate because the answer mentioned there using jquery $.each doesn't work as expected and that has been specific to wrapping divs may be on any technique and my question is specific to wrap with $.each. I don't see it as duplicate!!

A Pen to show how the $.each answer over there works!

Isn't it simply [this answer](http://stackoverflow.com/a/13279336/1338292)? — Ja͢ck, Jun 22 '15 at 04:28
@Ja͢ck Oh yea!! But that's kind of plugin we need to create right? Isn't there any simple way? I mean jquery makes the life of developer easier so was thinking was there any replacement for this kind of loops in jquery! — Guruprasad J Rao, Jun 22 '15 at 04:31
@ArunPJohny.. So no optional replacement for this using `$.each` — Guruprasad J Rao, Jun 22 '15 at 04:31
@Ja͢ck.. Hmm I see.. might expect some right way from jQuery developers in their upcoming versions.. :) — Guruprasad J Rao, Jun 22 '15 at 04:34
@Ja͢ck.. Even that does not work - **[Pen here](http://codepen.io/kshkrao3/pen/mJBvYE)** :( — Guruprasad J Rao, Jun 22 '15 at 04:35
possible duplicate of [Wrap every 3 divs in a div](http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div) — Manoz, Jun 22 '15 at 04:36
@GuruprasadRao You can do this http://jsfiddle.net/Lcr4Lund/ — Shaunak D, Jun 22 '15 at 04:36
Great @ShaunakD!! That's one Damn great answer!! Can you post it please!! :) — Guruprasad J Rao, Jun 22 '15 at 04:38
@Manoz. You can see this **[pen](http://codepen.io/kshkrao3/pen/mJBvYE)**!! that's not working either!! — Guruprasad J Rao, Jun 22 '15 at 04:39

score 5 · Accepted Answer · edited May 23 '17 at 12:05

5

A jQuery only way would be to iterate over the nth-child(4n)

$('.thumbnail:nth-child(4n)').each(function(){
    $(this)
      .prevAll('.thumbnail').andSelf()
      .wrapAll($('<div/>',{class:"new"})) 
});

Demo

Considering the complexity, not sure whether the prevAll() performs better than the plain for loop.

Referring one of my similar answer here

edited May 23 '17 at 12:05

Community

1
1

answered Jun 22 '15 at 04:38

Shaunak D

20,588
10
46
79

Simply superb!! Thanks for enlightening!! :) – Guruprasad J Rao Jun 22 '15 at 04:41
1

Thank you. Glad to help. – Shaunak D Jun 22 '15 at 04:43
On a small document you probably won't see much difference, but introducing this complexity to eliminate a humble for-loop doesn't seem worth it; also, what if the elements are wrapped with elements that share the same class name, it would not work in the same way all of a sudden. – Ja͢ck Jun 22 '15 at 05:38
Yes, you are right. The above solution is case-specific. *if the elements are wrapped with elements that share the same class name*: This can still be handled jQuery-selector way (`('.thumbnail:not('.thumbnail > .thumbnail')`). But again as you said, jQuery might increase the complexity compared to a plain for loop. – Shaunak D Jun 22 '15 at 05:45

score 1 · Answer 2 · edited May 23 '17 at 12:14

Nothing really beats a direct for loop like that, but it would be handy to keep this in a small extension:

$.fn.wrapEvery = function(n, html) {
    for(var i = 0; i < this.length; i+=n) {
        this.slice(i, i+n).wrapAll(html);
    }
});

Then, called like:

$('.thumbnail').wrapEvery(4, "<div class='new'></div>");

Or, a more generic chunk function from an earlier answer.

$.fn.every = function(n) {
    var arr = [];
    for (var i = 0; i < this.length; i+=n) {
        arr.push(this.slice(i, i+n));
    }
    return this.pushStack(arr, "every", n);
}

Called like:

$('.thumbnail').every(4).wrap('<div class="new"></div>');

Thanks buddy!! a `plugin` would be a great idea too!! Thanks for your effort and explanation!! +1 — Guruprasad J Rao, Jun 22 '15 at 04:51

Converting "i+=n" for-loop to $.each

2 Answers2