jQuery: заменить каждое фоновое изображение тегами <img>, оставив источники без изменений

Question

Как бы заменить каждое фоновое изображение именем класса:

backgroundPNGAcontain

на 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);