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>"); 
    }); 
});