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

Question

如何用 class 名称替换每张背景图片：

backgroundPNGAcontain

div（class 名称 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); 不会通过正确匹配每张图片来更改源，而是找到最后一张背景图片并将每张图片设置为那个。

这里是 fiddle：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');

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

jQuery: Replace each Background-Image with <img> tags leaving sources unchanged

html

javascript

jquery

replace

background-image