jQuery prepend元素到一个href，每页只有一次

Question

我有一个jQuery脚本，发现任何href链接与.jpg或.png作为源，并prepends一些额外的span元素链接。它运作良好，但是如果我在一个页面上有多个链接，prepend被添加多次。 例如，一个包含3个链接的页面，第一个标签会预先设置跨度3次，第二个标签预先设置跨度2次，第三个链接将预先设置跨度一次。 如何获得span每个标签只能预定一次？

$(document).ready(function() { 
    $("#main_content_container a[href$='px.jpg'], #main_content_container a[href$='.png']").each(function() { 
    $(this).attr('rel','lightbox').addClass("gallerypic"); 
    $(".gallerypic").prepend("<span><img src='/images/common/zoom_in.png'/></span>"); 
    $(".gallerypic span").addClass("zoom-icon"); 
    }); 
}); 

Answer 1

它看起来对我来说，这两条线不必在.each()块真正属于：

$(".gallerypic").prepend("<span><img src='/images/common/zoom_in.png'/></span>"); 
$(".gallerypic span").addClass("zoom-icon"); 

尝试.each后移动它们，如：

$(document).ready(function() { 
    $("#main_content_container a[href$='px.jpg'], #main_content_container a[href$='.png']").each(function() { 
     $(this).attr('rel','lightbox').addClass("gallerypic"); 
    }); 

    $(".gallerypic").prepend("<span><img src='/images/common/zoom_in.png'/></span>"); 
    $(".gallerypic span").addClass("zoom-icon"); 
}); 

Answer 2

我认为这是因为你正在循环匹配的元素，但然后你使用类“gallerypic”来预先配置，并且再次匹配它们。试试这个：

$(document).ready(function() { 
    $("#main_content_container a[href$='px.jpg'], #main_content_container a[href$='.png']").each(function() { 
     $(this).attr('rel','lightbox').addClass("gallerypic"); 
     $(this).attr('rel','lightbox').prepend("<span class='zoom-icon'><img src='/images/common/zoom_in.png'/></span>"); 
    }); 
});