Rails 3のアプリケーションでjQuery Masonryを実装する際に問題が発生しました

Question

私のアプリでjQueryを実装しようとしていますが、機能しないようにしています。

私は問題が私がテーブルにそれを適用しようとしていると思う、divではない。誰かが見て確認することができますか？どうすれば修正できますか？

jquery masonryを適用したいページは、すべてのユーザーの投稿を表示する単純なindex.html.erbページです。私はこれらを3つの列に、さまざまな高さのボックスに表示させたいと思っています。

おかげで、

ファイサル

POSTS> INDEX.HTML.ERB

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/app/assets/javascripts/jquery.masonry.min.js"></script> 

<table class="table table-striped"> 
<script type="text/javascript"> 
$('#container').masonry({ 
    itemSelector: '.box', 
    columnWidth : 100 
}); 
</script> 
<tbody> 
<% @posts.each do |post| %> 
<tr> 
<td>I am a <%= post.title %> getting married in <%= post.job %> in <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.</td> 
<td><%= time_ago_in_words(post.created_at) %> ago.</td> 
</tr> 
<% end %> 
</tbody> 
</table> 

Answer 1

あなたが "/path/to/jquery.masonry.min.js" を更新していることを確認しますスクリプトへの実際のパス

ここで私が実行した実例ですhttp://jsfiddle.net/D7QQU/1/：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script src="/path/to/jquery.masonry.min.js"></script> 
    <style> 
    .item { 
     width: 220px; 
     margin: 10px; 
     float: left; 
    } 
    </style> 
    <script> 
    $('#container').masonry({ 
     itemSelector: '.box', 
     columnWidth : 100 
    }); 
    </script> 

    <div id="container"> 
    <% @posts.each do |post| %> 
     <div class="item"> I am a <%= post.title %> getting married in <%= post.job %> in <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>. 
     <%= time_ago_in_words(post.created_at) %> ago.</div> 
    <% end %> 
    </div> 

私が見たことから、それは表の代わりにdivsを使用しています。

まだ助けが必要な場合は教えてください。

編集：

あなたが下記のコメントに基づいて：

は、あなたはそれを使用して、ページの上部にこれを追加する必要があります。それは資産のjsを見つけるでしょう。

3.2を使用すると、その後、jqueryのは、ちょうどjqueryのレールを使用し、デフォルトでは、そこにある場合：あなたはあなたの資産フォルダ内の石造ファイルがある場合に必要はありませんので、コマンド

<%= javascript_include_tag('jquery.masonry.min') %> 

Answer 2

をインストールし、それがコンパイルされますそれにjavascript_include_tagを追加します。また、D3mon-1stVFWが述べたように、Rails 3.2を使用している場合、jQueryがデフォルトで組み込まれているため、そのスクリプトタグの必要もありません。

また、スクリプトでは、itemSelectorのクラス名をdiv要素の名前と一致させる必要があります。あなたの場合、div要素はclass = "item"ですので、

<script> 
    $('#container').masonry({ 
     itemSelector: '.item', 
     columnWidth : 100 
    }); 
</script> 

あなたのプロジェクトではもう少しあなたを得るでしょう。