3

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

xxxxxxx
xxxxxxx
xxxxx x
xxxxx 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 个元素的方法是什么?

4

1 回答 1

3

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

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">');
}

编辑:如果总金额可能与填写有偏差,则另一种版本。这个版本用 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>

小提琴

于 2017-03-09T10:30:21.667 回答