基于元素数量的JQuery / JS多重

Question

如果这是一个非常简单的问题我提前道歉，我只是不熟悉JS，因此不确定如何制作它。基本上，我有div ID来保存数据库中的加载元素（使用Elixir / Phoenix）：

      <div id ='chicken'>
        <%= for chicken <- @chickens do %>
          <%= render MyApp.OrderItemView, "chicken.html", changeset: @order_item_changeset, action: order_order_item_path(@conn, :create, @order), chicken_id: chicken.id, chicken_price: chicken.price, chicken_name: chicken.name %>
        <% end %>
      </div>

所以我的页面看起来像这样：

<div id = 'chicken'>
 <div class="menuitems"></div>
 <div class="menuitems"></div>
 <div class="menuitems"></div>
</div>

其中每个类“menuitems”是一个单独的元素加载。这是一个包含6个元素的示例：

我的问题是我想要多个页面。因此，如果有超过6个元素，它就不适合，因此我需要一个按钮到下一页。例如，如果有不到10个元素，则前6个应该是可见的，而其他元素应该在另一个页面上（应该是下一页的按钮）。

编辑（如评论中所指）：这就是我到目前为止所做的：var numItems = $("#chicken").children('div').length;

任何建议，建议都赞赏，因为我真的不知道如何制作它。我假设我需要计算元素，如果超过6则创建“下一页”。

Answer 1

变化，

var numItems = $(".chicken").children('div').length;

到

var numItems = $("#chicken").children('div').length; 

因为如果您使用“鸡”作为ID，那么您需要使用“＃”而不是“。”我希望这能解决你的问题。