Question

我有这个HTML：

<article>
    <div class="look">
    </div>

    <div class="read">
        <img src="http://mysite.com/some-image.jpg">
    </div>
</article>

<article>
    <div class="look">
    </div>

    <div class="read">
        <img src="http://mysite.com/another-image.jpg">
    </div>
</article>

<article>
    <div class="look">
    </div>

    <div class="read">
        <img src="http://mysite.com/yet-another-image.jpg">
    </div>
</article>

对于<article>的每个实例，我尝试使用jQuery使用<div class="look">中的第一个图像设置<div class="read">的背景图像。到目前为止，这（下面）似乎有效，但它为<article>的所有实例设置了相同的图像（在<div class="look">的最后一个实例中）。我需要从<div class="look">的每个实例设置<div class="read">的每个实例。这是我的jQuery：

$(document).ready(function() {
    $('.read').find('img').each(function(n, image){
        var image = $(image);
        var thisurl = $(this).attr('src');
        $('.look').css('background-image', 'url(' + thisurl + ')');
    });
});

Answer 1

$(document).ready(function() {
    $('.look').css('background-image', function(){ 
        return 'url(' + $(this).next().find('img').attr("src") + ')';
    })
})

jsFiddle example （隐藏img元素以便更容易看到背景）

使用jQuery使用第一个图像的url设置div的背景图像

1 个答案: