以图片为背景，适用于同级的 div 父级答案

【问题标题】：Use images as background and apply to div parents with the same class以图片为背景，适用于同级的 div 父级
【发布时间】：2017-10-16 19:02:30
【问题描述】：

我正在尝试使用 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 应用到其父容器。

提前致谢！（对不起我的英语不好）。

【问题讨论】：

标签： javascript jquery html image background

【解决方案1】：

你可以使用

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

【讨论】：

【解决方案2】：

问题是因为您选择了所有 .class img 元素。调用 attr() 只会让你在集合中找到第一个项目。

要解决此问题，您可以为css() 提供一个函数，该函数可用于查找与当前.class 元素相关的img。试试这个：

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

【讨论】：

【解决方案3】：

尝试each函数。并选择带有children('img')的儿童图像

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：