JQuery循環重複結果

目前我有一個同位素頁面的元素列表。元素的基本標記是：JQuery循環重複結果

<div class="element conference-box"> <a href="#"><img src="#" class="conference-image" alt=""></a> 
    <div class="caption"> 
     <div class="confback"></div> 
     <h3 class="conference-title"></h3> 
     <h4 class="conference-details"></h4> 
    </div> 
</div>

頁面上有大約30個元素。

我一直在嘗試使用jQuery將圖像與類「會議形象」，並將其作爲背景圖像應用於.confback div，同時保留原始圖像。我不得不使用此代碼一些成功：

$('.element').each(function() { 
    var getImageSrc = $('.conference-image').attr('src'); 
    $('.confback').css('background-image', 'url(' + getImageSrc + ')'); 
    return true; 
});

然而，我的劇本從第一元素採用圖像並應用作爲在我的網頁上的所有元素每.confback DIV的背景圖像。顯然，我希望每個單獨的元素都使用該特定元素中使用的圖像。

來源

2015-12-10 user5665010

在您的.each函數$(this)內將是類element的元素。你想用它的後代，發現的屬性和CSS使用find：

$('.element').each(function() { 
    var getImageSrc = $(this).find('.conference-image').attr('src'); 
    $(this).find('.confback').css('background-image', 'url(' + getImageSrc + ')'); 
});

來源

2015-12-10 16:02:30 Panda

覺得你和詹姆斯寫了同樣的解決方案一個字一個字。謝謝你們，這個工作很完美！ – user5665010

在.each回調中，this變量將是當前正在循環的.element。你可以用它來只是元素中搜索img和div你想通過重新包裝其與jQuery和使用find方法工作：

$('.element').each(function() { 
    var getImageSrc = $(this).find('.conference-image').attr('src'); 
    $(this).find('.confback').css('background-image', 'url(' + getImageSrc + ')'); 
});

另外請注意，爲.each該文件說：

使用return false提前突破每個（）循環。

這並不意味着你必須使用return true來繼續循環，不返回任何東西也是有效的 - 所以我從上面的示例中刪除了它。

來源

2015-12-10 16:01:13

JQuery循環重複結果

回答

相關問題