Question

我尝试使用img src作为其父div（具有相同类）的背景图像和jQuery方式，但我需要将img child的具体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();
})

Answer 2

问题是因为您选择了所有.class img元素。在其上调用attr()只能获得在集合中找到的第一个项目。

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

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

Answer 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>

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

3 个答案: