在img之后添加“</a>”jQuery将它添加到元素之前

我正在使用由另一家公司开发的.NET应用程序。他们允许我注入我自己的js和css文件，所以我使用jQuery来修改他们的HTML。在img之后添加“</a>”jQuery将它添加到元素之前

我们在文章的左上角有缩略图，我在缩略图之前和之后添加代码以添加一个灯箱以添加链接。

但是它不起作用，并且由于某种原因，如果我检查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>

来源

2016-05-17 s1h4d0w

DOM不是HTML的字符串。没有添加元素的“开始”和“结束”。您只需添加整个元素对象并向其添加内容即可。 – 2016-05-17 12:46:53

@squint：哦，真的很好，我必须记住并无耻地重复使用它。 –

@ T.J.Crowder：请做！ :) – 2016-05-17 12:54:12

您正在考虑使用标记，但浏览器在从文本转换为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>'); 
});

来源

2016-05-17 12:46:49

谢谢你的完整答案。这使它工作！ – s1h4d0w

@FreeAsInBeer：感谢您的编辑！ –

@ T.J.Crowder没问题。绝对是我修正的更有趣的拼写错误之一！ – FreeAsInBeer

在img之后添加“</a>”jQuery将它添加到元素之前

回答

相关问题