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

Question

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

背景PNGA包含

使用具有相同 url 源的 div（类名 imgWrapper）和图像？

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

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

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

Answer 2

尝试

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