根据集合的大小动态添加行

Posted 2023-02-15

【中文标题】根据集合的大小动态添加行

【英文标题】：Dynamically add rows based on size of collection

【发布时间】：2020-11-24 16:18:31

【问题描述】：

我正在尝试将一组卡片渲染为 3 行。目前集合大小为 8。所以它应该渲染为 3 行，前两行填充 3 张卡片，最后一行有 2 张卡片。

目前我可以将 8 个对象渲染成 3 行。但是，它不是在前一行下创建一行，而是在当前行内创建新的row div ，从而使布局不合时宜。

我认为结束 div 语句的条件给我带来了问题。

呈现卡片的代码：

    <% @count = 0 %>
    <% @col_count = 0%>
    <div class="card-group">
        <% @user.articles.each do |article| %>
            <% if @count == 3 %>
                <% @count = 0%>
            <% end %>

            <% if @count == 0 %>
                <div class="row">
            <% end %>
            
                <div class="card col-4">
                    <img class="card-img-top" src="..." >
                    <div class="card-body">
                        <h5 class="card-title">Test Card</h5>
                        <p class="card-text">This is a placeholder card.</p>
                    </div>           
                </div>
            
            <% if @count == 0 && @col_count == 2 %>            
                </div>
                <% @col_count = 0 %>
            <% end %>

            <% @count = @count + 1 %>
            <% @col_count = @col_count + 1 %>
        <% end %>
    </div>    

感谢任何帮助。

【参考方案1】：

我认为如果你改用each_slice 会更好，它应该看起来像这样：

        <% @user.articles.each_slice(3) do |articles| %>
            <div class="row">
            <% articles.each do |article| %>
            
                <div class="card col-4">
                    <img class="card-img-top" src="..." >
                    <div class="card-body">
                        <h5 class="card-title">Test Card</h5>
                        <p class="card-text">This is a placeholder card.</p>
                    </div>           
                </div>
            <% end %>
            </div>
        <% end %>

如有错误请指正。

【讨论】：

感谢您的成功。不知道你能做到。