为什么这会迭代 div 两次？答案

【问题标题】：why does this iterate the div twice?为什么这会迭代 div 两次？
【发布时间】：2013-07-20 16:08:17
【问题描述】：

所以我创建了一个 erb 块，它遍历每个图像标签 ('.tagged') 的坐标，然后在给定坐标处为每个图像显示 '.tagged'。在这种特殊情况下，块会遍历 2 个图像，并且 .tagged 会显示在两个图像上，而不是每个受尊重的图像一个标签。这是因为 .each() 方法吗？

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

【问题讨论】：

没有看到 HTML 标记，就不可能回答您的问题。你能创建一个 jsFiddle 吗？
我做了一个要点，只是因为它会更快:) gist.github.com/filkinsteez/6050853
这是 jsFiddle：jsfiddle.net/devlshone/44r5v 你能向我解释一下期望的结果与我所看到的相比吗？
从您的要点看来，您正在为每个 html 块生成一次 jquery 脚本。将其移到您的 html 生成循环之外，因此 $(document).ready( {...} ); 函数只会插入您的页面一次。
在小提琴中，红色矩形的大小完全相同，而它们应该是其尊重图像上方数字的大小（X坐标，Y坐标，宽度，高度）。理想情况下在那个位置。当我使用 erb 块在本地运行它时，它会生成类似 img96.imageshack.us/img96/4055/wbng.png 的内容

标签： jquery image iteration erb

【解决方案1】：

将你的 javascript 块移出

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

循环。

【讨论】：

我做了，现在 .tagged 每个图像只生成一次，但两者的坐标相同。有什么想法吗？