jquery - 使用 jQuery 使用另一个 div 中第一张图像的 url 设置 div 的背景图像

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 元素以便更容易看到背景)