将元素列表拆分为组

Posted 2023-02-23

【中文标题】将元素列表拆分为组

【英文标题】：Split list of elements into groups

【发布时间】：2017-07-30 06:29:08

【问题描述】：

我想将元素列表分成 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 个元素的方法是什么？

【参考方案1】：

通过预先计算组的数量，如果“组”索引是最后一个，则可以调整切片：

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 填充最后一组，但用余数填充前一组。 （如果这不是意图，并且原始代码是所需的目标，则链接的小提琴仍然包含原始代码）

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

【讨论】：

谢谢！您能否详细说明这条线的工作原理 i===cnt-2 吗？ 2：grp？

不客气。 cnt 是组数。 i 是组的迭代器，因此代表当前组。 cnt-2 是最后一组之前的组（索引从零开始，因此 cnt-1 是最后一组，cnt-2 是之前的组）。 grp 是 groupcount (4) 的变量。所以i===cnt-2 ? 2 : grp 检查 i 是否是最后一个组，如果为真则返回 2，否则返回 4（grp）（并且ind 在同一行上随着该数量增加）

理论上这是正确的，但是如果项目数超出最后一组就会出现问题。不知道如何更好地解释它，尝试一个一个增加初始.el 的数量，您会注意到它们并不总是填满最后一组。

@dfsq 你是对的，但我假设除法是基于“正确”的总量。对于其他部门，剩下的部分应该做什么是一个问题。额外 1 是否意味着倒数第二行将包含 3 个项目。或一组有 2 个项目，最后一个有 1 个项目。第一个版本可以通过以下方式完成：jsfiddle.net/p13rcd1c/4