ruby-on-rails – 将ruby / splitting数组放入列中

我可以发现使用正确的命名,但到目前为止没有任何突然出现.我会考虑将数组拆分成列.

意思是,有[0,1,2,3,5,7,9],我想有4个数组(4列)：

[[0,4,[1,5],[2,6],[3,7]]

实际上,我会研究迭代一个活动的记录数组,在4个不同的html列中显示它们(它们是图像记录),同时从左到右保持它们的顺序

解决方法

Rails解决方案

在rails中,您可以简单地执行：

ary = [0,6,8,9]
ary.in_groups_of(4).transpose.map(&:compact)
  #=> [[0,8],7]]

说明：

in_groups_of是一个添加到Array类的cool rails方法,其行为与each_slice非常相似,不同之处在于它保证所有数组的大小相同.这很重要,所以我们以后可以使用转置.此方法返回行的数组.

现在,转置 – 另一个值得了解的酷方法.它需要一个数组数组,并且所有内部数组必须具有相同的长度(因此实际上这代表一个矩形矩阵).它做什么 – 它返回目标数组中的列数组.

现在我们需要摆脱nils(除非他们不打扰你),所以我们在每个列上都运行compact,我们正是你想要的.

纯ruby溶液：

我们没有in_groups_of所以我们需要在没有它的情况下实现相同的行为：

ary.each_slice(4).map {|a| a.fill nil,a.size,4 - a.size}.transpose.map(&:compact)

更好地解决实际问题

Practically,I’d look into iterating over an active record array,
displaying those (they’re images records) in 4 different html columns,
while maintaining their order from left to right

除非是表格数据,否则不应使用表格来显示数据.图像不是表格数据,这意味着特定图像在给定列/行的位置完全不相关.总有一种更好的方法可以做到这一点.

在你的情况下,我会建议纯CSS解决方案(haml)：

%ul.images
  - @images.each do |i|
    %li= image_tag i.iamge_url    # or sth

然后在你的CSS(scss)：

ul.images {
  width: 100%;
  font-size: 0;    # remove whitespace between li elements
  li {
    display: inline-block;
    width: 25%;   # forcing 25% without whitespaces guarantees 4 column
  }
}

此模型的主要优点是您可以使列数取决于媒体查询,因此根据您的用户屏幕大小显示每行不同数量的图像(对于移动设备很重要).

如果你觉得更冒险,你讨厌IE并且不关心它的用户,那就去看看弹性盒子吧.有一天它可能成为标准,并且已经可以在许多页面上看到.