jQuery：将每个背景图像替换为<img>标签，保持源不变

Question

如何将每个背景图像替换为类名：

背景PNGA包含

使用div(类名 imgWrapper(和具有相同 URL 源的图像？

我非常接近。这是我的代码：

$( ".backgroundPNGAcontain" ).html( "<div class='imgWrapper'><img></div>" );
$( ".backgroundPNGAcontain" ).each(function() {
var url = $( this ).css('background-image');
url = url.replace(/^url(["']?/, '').replace(/["']?)$/, '');
$(".imgWrapper>img").attr("src", url);
$( this ).css( "background-image", "none" );
});

---

只是$(".imgWrapper>img").attr("src", url);不会通过正确匹配每个图像来更改源，而是找到最后一个背景图像并将每个图像设置为该图像。

这里有一个小提琴：https://jsfiddle.net/gd29wLu5/

Answer 1

试试

$('.imgeWrapper').find('img').attr('src','/url');

Answer 2

您的代码正在将 imgWrapper 下的所有图像替换为相同的属性。 而不是$(".imgWrapper>img").attr("src", url);试试$(this).children("img").attr("src",url);