将元素列表分成组 [英] Split list of elements into groups

问题描述

我想将元素列表分为4组，但最后一个元素应仅包含2个元素.

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

xxxxxxxxxxx
xxxxxxxx
xxxxx x   x
xxxxx 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 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个元素?

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

推荐答案

如果'group'-index是最后一个，则可以通过预先计算组数来调整切片:

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 :如果总金额可能与填写内容有所出入，则为备用版本.此版本用4填充最后一个组，但用其余填充前一个. (如果这不是故意的，并且原始代码是必需的目标，则链接的小提琴仍然包含原始代码)

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>

小提琴

这篇关于将元素列表分成组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！