javascript - ルビーオブジェクトのCoffeescriptネストされた反復

Question

いくつかの製品が掲載された製品ページがあります。製品をクリックすると、ライトボックスがその製品と関連製品のリストとともにポップアップ表示されます。関連製品のリストにカーソルを合わせると、画像の不透明度が変わるはずです。このスクリプトを使用して、最初の製品でこれを機能させています。

 $(document).ready ->
   z = $(".related_products_image")
   z.each ->
     relid = $(this).data("imageid")      
     hover = $("#related_" + relid) 
     hover.mouseenter ->
      $(this).css("opacity", 1.0)
     hover.mouseleave ->
      $(this).css("opacity", 0.4)

ただし、最初の製品でのみ機能します。このページには関連商品のリストがたくさんあり、それを繰り返していないので、最初の商品を選ぶだけだと思います。

私のhtml/erbは次のようになります：

<div id="product_popup_<%= product.id %>">
        <div class="related-products">
          <ul class="related_products_list" id="related_products_list_<%= product.id %>" data-listid="<%= product.id %>">
         <% @related_products.each do |related_product| %>
         <li class="related_products_item"><%= link_to large_image(related_product, :itemprop => "image", :data => {:imageid => related_product.id}, :id => "related_" + related_product.id.to_s, :class => "related_products_image"), url_for(related_product) %></li>
         <% end %>
    </ul>

そこで、次のようなネストされたイテレーションを作成してみました。

$(document).ready ->
 i = $(".related_products_list")
 i.each ->
  listid = $(this).data('listid')
  list = $("#related_products_list_" + listid + " li" + " img") 
  list.each ->
    z = $(".related_products_image")
    relid = $(this).data("imageid")      
    hover = $("#related_" + relid) 
    hover.mouseenter ->
      $(this).css("opacity", 1.0)
    hover.mouseleave ->
      $(this).css("opacity", 0.4)

**編集：上記のコードは最初の製品のligutboxで機能しますが、ページ上の残りの製品では何も機能しません。