将元素列表拆分为组

Question

我想将元素列表分成 4 个一组，除了最后一个元素应该只包含 2 个元素。

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

这将分成 4 组 el.:

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

https://jsfiddle.net/p13rcd1c/

使一个组只包含 2 个元素的方法是什么？

Answer 1

通过预先计算组数，如果'group'-索引是前一个，则可以调整切片：

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：如果总金额有偏差可以另行填写。此版本用 4 填充最后一组，但用剩余的填充前一组。（如果这不是本意，并且原始代码是必需的目标，则链接 fiddle 仍包含原始代码）

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

将元素列表拆分为组

Split list of elements into groups

jquery

slice

wrapall