Question

我正在使用由不同公司开发的.NET应用程序。他们允许我注入我自己的js和css文件，所以我使用jQuery来修改他们的HTML。

我们在文章的左上角有缩略图，我通过在缩略图之前和之后添加代码来添加链接来为图像添加灯箱。

然而它不起作用，并且由于某种原因，如果我在Firebug中检查元素，两个部分都会在图像之前结束。可能是因为img元素没有正确关闭吗？

我的HTML（确切地说，我可以在没有js的情况下编辑它）：

<div class="news-image">
     <img src="image.jpg?thumb=1" alt="Article with picture ">
</div>

我的jQuery：

$(".news-image img").each(function(){
    var newsimgurl = $(this).attr("src").replace('thumb=1','thumb=0');

    $(this).before('<a href="'+newsimgurl+'" data-lightbox="lightbox">');
    $(this).after('</a>');

});

我最终得到的结果：

<div class="news-image">
     <a href="image.jpg?thumb=0" data-lightbox="lightbox"> </a>
     <img src="image.jpg?thumb=1" alt="Article with picture ">
</div>

Answer 1

您正在考虑标记，但浏览器在从文本转换为DOM元素时仅使用标记。一旦您处理了DOM，就可以处理对象。

在您的情况下，您要创建a对象，将其插入img所在的位置，然后将img移入其中。实际上，jQuery具有以下功能：wrap：

$(".news-image img").each(function(){
    var newsimgurl = $(this).attr("src").replace('thumb=1','thumb=0');

    $(this).wrap('<a href="'+newsimgurl+'" data-lightbox="lightbox"></a>');
});

添加＆＃34;＆＃34; img与jQuery之后在元素之前添加它

1 个答案: