javascript - 在 img 之后添加 ""用 jQuery 在元素之前添加它

Question

我正在使用由另一家公司开发的 .NET 应用程序。他们允许我注入(inject)自己的 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>');
});