javascript - 使用图像作为背景并应用于同级的 div parent

Question

我正在尝试使用 jQuery 方式使用 img src 作为其父 div(具有相同类)的背景图像，但我需要将其 img 子项的具体 url 应用于每个 div，而不更改或添加额外的类或 id，以便每个 div 父级应用相应的不同背景图像。

我的 HTML 是这样的:

<div class="class">
     <img src="url-image-1" />
</div>

<div class="class">
     <img src=“url-image-2” />
</div>

<div class="class">
     <img src="url-image-3" />
</div>

...和 ​​jQuery:

$('.class').css('background-image', 'url(' + $('.class img').attr('src') + ')');
$('.class img').remove();

此代码每次都会抓取第一个元素 (url-image-1)；它不知道我想将每个 img 应用到其父容器。

提前致谢! (抱歉我的英语不好)。

Answer 1

您可以使用

$('.class').each(function(){
    $(this).css('background-image', 'url(' + $(this).find('img').attr('src') + ')');
    $(this).find('img').remove();
})