爲什麼這個迭代div兩次？

所以我創建了一個遍歷每個圖像標籤（'.tagged'）的座標的erb塊，然後在給定座標處爲每個圖像顯示'.tagged'。在這種特殊情況下，塊通過2個圖像迭代，並且.tagged顯示在兩個圖像上，而不是每個尊重圖像的一個標籤。這是因爲.each（）方法嗎？爲什麼這個迭代div兩次？

<div class="container"> 
<% if @new_manual.present? %> 
<% @new_manual.steps.each do |step| %> 
    <% i_connection = Contact.find(step.input_contact) %> 

<span class="i_connection" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>" data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>"> </span> 
<br> 
<div class="image_panel"> 
    <%= image_tag(i_connection.image.image.url(:large)) %> 
<div class='planetmap'></div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$("span.i_connection").each(function() { 
    var pos_width = $(this).data('pos-width'); 
    var pos_height = $(this).data('pos-height'); 
    var xpos = $(this).data('pos-x'); 
    var ypos = $(this).data('pos-y'); 

    $(".tagged_box").css("display","block"); 
    $(".tagged").css("border","5px solid red"); 

     $('.planetmap').append('<div class="tagged" style="width:'+pos_width+'px;height:'+pos_height+'px;left:'+xpos+'px;top:'+ypos+'px;" ><div class="tagged_box" style="width:'+pos_width+'px;height:'+ 
      pos_height+'px;" ></div>') 
}); //END OF SPAN.CONNECTION ITERATION 
}); //END OF JQUERY 
</script> 
<% end %> 
<% end %> 
</div>

來源

2013-07-22 Eric Filkins

沒有看到HTML標記，這是不可能回答你的問題。你可以創建一個jsFiddle嗎？ – DevlshOne

我做了一個要點，只是因爲它會更快:) https://gist.github.com/filkinsteez/6050853 –

這裏是jsFiddle：http://jsfiddle.net/devlshone/44r5v/你能向我解釋期望的結果是什麼與我所看到的？ – DevlshOne

移動你的JavaScript塊

<% @new_manual.steps.each do |step| %>

循環之外。

來源

2013-07-22 03:06:59 Jason

我做了，現在.tagged每個圖像只生成一次，但兩者的座標相同。有任何想法嗎？ –

爲什麼這個迭代div兩次？

回答

相關問題