Question

我有一个jQuery脚本，可以找到任何以.jpg或.png作为源的href链接，并预先添加一些额外的span元素进行链接。它运行良好，但是如果我在页面上有多个链接，则会多次添加前置。例如，一个带有3个链接的页面，第一个标签将在前面加上3次，第二个标签将前置跨度2次，第三个链接将前置跨度一次。如何使每个标签只有一个前缀？

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

我认为这是因为你循环遍历匹配的元素，但是你使用“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>");
    });
});

Answer 2

在我看来，这两行并不属于您的.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");
});

jQuery将元素添加到href，每页只有一次

2 个答案: