Ruby on rails 第二个容器没有在MyRails应用程序中加载jquery

我正试图显示我的文章按创建日期组织。Jquery砌体对于第一个容器可以正常工作，但是对于第二个容器，它无法正确加载。在web浏览器中查看代码时，第二个容器会显示以下内容：

<div id="pins" class="transitions-enabled">
      <div class="box panel panel-default">

      </div>
  </div>

<div id="pins" class="transitions-enabled masonry" style="position: relative; height: 247px; width: 448px;">
      <div class="box panel panel-default masonry-brick" style="position: absolute; top: 0px; left: 0px;">

      </div>

  </div>

视图/pins/index.html.erb：

<%= render 'pages/home' %>

<div id="pins-container" class="container">
 <% @pins_by_day.each do |day, pins| %>
   <h5 align="center"> <%= day.strftime('%B %d, %Y') %> </h5>
    <div class="well well-sm">
     <div id="pins" class="transitions-enabled">
      <% for pin in pins %>
        <div class="box panel panel-default">
         <%= link_to pin %>

          <div class="panel-body">
            <p>
              <%= pin.description %>
            </p>
          </div>

      </div>
    <% end %>
  </div>
 </div>
<% end %>
</div>

---

如果有人能在我的页面上解释如何正确地为多个容器加载jquery砌体，我将不胜感激。第一个部分正确加载，但第二个容器只是一列

HTML不喜欢每页有多个id。jQuery将只找到第一个。因此，如果您要对部分或模板进行迭代，请确保不使用id，或者让id是动态的

因此，请尝试以下操作，而不是

id=“pins”

：

<div class="masonry-pins transitions-enabled">

---

另外，我设想在

imagesLoaded

回调中，您可以访问

this

处的元素？与其调用

$（'.marysish pins'）。marosish

您可能只想调用

$（this）。marosish

非常棒的解释-您的修复效果非常好。谢谢你的帮助

<div class="masonry-pins transitions-enabled">

$ -> 
  $('.masonry-pins').imagesLoaded ->
    $('.masonry-pins').masonry
      itemSelector: '.box'
      isFitWidth: true