動態添加背景圖像使用每個（）

Question

我動態生成這樣輸出的HTML。 [uri]代表圖像的絕對URL。每個HTML塊都有不同的圖像。我需要動態地將這個url作爲每個rotation-bg的背景圖片。

<div class="rotation-bg"> 
    <span class="url visuallyhidden">[uri]</span> 
</div> 

<div class="rotation-bg"> 
    <span class="url visuallyhidden">[uri]</span> 
</div> 

<div class="rotation-bg"> 
    <span class="url visuallyhidden">[uri]</span> 
</div> 

... 

我能夠用下面的代碼用一個HTML代碼塊做到這一點。問題是有多個HTML塊，所以變量不再有效。我需要單獨針對每個塊。

var bgImg = $('.rotation-bg .url').text(); 

$('.rotation-bg').css('background-image', 'url(' + bgImg + ')'); 

我能夠使用下面的代碼循環遍歷每個塊，但不知道如何採取這個變量更改每個塊的背景圖像。

$('.rotation-bg .url').each(function(){ 
    var bgImg = $(this).text(); 

    $('.rotation-bg').css('background-image', 'url(' + bgImg + ')'); 
}); 

Answer 1

你其實很親密。在你的每個函數中，你一次性定位了所有的.rotation-bg div，所以它們都會以上一張圖片的URL作爲背景。如果您將其更改爲定位您定位的.url跨度的父級，則它會單獨打擊每個父級。

$(this).parent().css('background-image', 'url(' + bgImg + ')'); 

JS小提琴這裏 - http://jsfiddle.net/9D89h/