4

I would like to split list of elements into groups of 4 except one before last that should contain 2 elements only.

x x x x x x x
x x x x x x x
x x x x x    x
x x x x x    x

This will slice into groups of 4 el.:

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

https://jsfiddle.net/p13rcd1c/

What is an approach to make one group to contain only 2 elements?

art0076
  • 57
  • 7

1 Answers1

4

By calculating the number of groups beforehand, the slice could be adapted if the 'group'-index is the one before last:

var els = $(".el"),grp = 4, cnt = Math.ceil(els.length/grp), rem = els.length % grp, ind = 0;
for(var i = 0; i <= cnt;i++) {
    els.slice(ind, ind += (i==cnt-2 ? rem : grp)).wrapAll('<div class="group">');
}

edit: an alternate version if the total amount can deviate from filling out. This version fills the last group with 4, but fills the one before that with the remainder. (If that is not the intention, and the original code was the required goal, the linked fiddle still contains the original)

var els = $(".el"),grp = 4, cnt = Math.ceil(els.length/grp), rem = els.length % grp, ind = 0;
for(var i = 0; i <= cnt;i++) {
els.slice(ind, ind += (i==cnt-2 ? rem : grp)).wrapAll('<div class="group">');
}
* { margin: 0; padding: 0}

body {
  margin: 10px
}

.el {
  width: 20px;
  height: 10px;
  margin-bottom: 2px;
  background-color: blue;
}

.group {
  float: left;
  margin-left: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>

fiddle

Me.Name
  • 12,259
  • 3
  • 31
  • 48
  • Thanks! Could you expand on how this line works please i===cnt-2 ? 2 : grp? – art0076 Mar 09 '17 at 10:42
  • You're very welcome. `cnt` is the number of groups. `i` is the iterator for the groups, so represents the current group. `cnt-2` is the group before the last (the index is zero based, so cnt-1 is the last group, cnt-2 the one before that). `grp` is the variable for the groupcount (4). So `i===cnt-2 ? 2 : grp` checks if i is the group before last and returns 2 when true, otherwise 4 (grp) (and `ind` is increased with that amount on the same line) – Me.Name Mar 09 '17 at 10:46
  • In theory this is correct, however there will be problems if the number of items overflows the last group. Don't know how to explain it better, try to increase number of initial `.el` one by one and you will notice how they not always fill the last group. – dfsq Mar 09 '17 at 11:03
  • @dfsq You're right, but I was assuming that the division was based on a 'correct' total amount. With other divisions, it's a matter of what should be done with the remainder. would 1 extra mean that the one to last row would contain 3 items. or a group with 2 items and the last with 1 item. The first version can be done with something like: https://jsfiddle.net/p13rcd1c/4/ – Me.Name Mar 09 '17 at 12:14