第二个容器未在我的 rails 应用程序中加载 jquery 砌体

Question

我正在尝试显示按创建日期组织的帖子。 Jquery Masonry 对于第一个容器工作正常，但对于第二个容器它无法正确加载。当我在网络浏览器中查看代码时，它显示第二个容器：

<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>

app/assets/javascripts/pin.js.coffee:

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

views/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 砌体，我将不胜感激。第一部分加载正确，但第二个容器只是一列。

Answer 1

HTML 不喜欢每页有多个 ID。而 jQuery 只会找到第一个。因此，如果您要遍历部分或模板，请确保您不使用 ID，或者让 ID 是动态的。

所以不要 id="pins" 试试：

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

和

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

此外，我想在 imagesLoaded 回调中，您可以访问 this 处的元素？您可能只想调用 $(this).masonry

而不是调用 $('.masonry-pins').masonry

第二个容器未在我的 rails 应用程序中加载 jquery 砌体

Second container does not load jquery masonry in my rails app

ruby-on-rails

jquery-masonry