Javascript 使用图像作为背景并应用于具有相同类的div父级_Javascript_Jquery_Html_Image_Background

Javascript 使用图像作为背景并应用于具有相同类的div父级

javascript jquery html image

Javascript 使用图像作为背景并应用于具有相同类的div父级,javascript,jquery,html,image,background,Javascript,Jquery,Html,Image,Background,我试图使用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”

我试图使用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>

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

提前谢谢！（很抱歉我的英语不好。）

你可以用

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

你可以用

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

问题是因为您选择了所有

.class img

元素。在上调用

attr（）

，只会得到集合中找到的第一个项目

要解决此问题，可以为

css（）

提供一个函数，用于查找与当前

.class

元素相关的

img

。试试这个：

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