jquery - 使用 jQuery 在另一个中使用第一个图像的 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 示例（隐藏 img 元素以使查看背景更容易）