JQuery 第一次没有将背景图片设置为 div

Question

我正在尝试使用 JQuery 将背景图像设置为 div。如果有多个图像，它会起作用，但如果只有一个 img，它就不起作用。

for(var i = 0; i<offers.length; i++)
{
   var offer = offers[i];
   var photo = photos[i];
   $('.img-product').css("background-image", "url("+photo+")");
   $('.img-product').css("background-size", "100% 100%");
   ...
}

我试图在 $('.img-product').css("background-image", "url("+photo+")"); 之前和之后“提醒”照片的值(value)； 语句，它工作正常。

这是多于一个offer时的结果

这是搜索返回单个元素时的结果

Answer 1

var strong = document.createElement("strong");
            var founds_nbr = document.createTextNode(offers.length);
            var founds_txt = document.createTextNode(" offerte trovate");
            strong.appendChild(founds_nbr);
            founds.appendChild(strong);
            founds.appendChild(founds_txt);
            for(var i = 0; i<offers.length; i++)
            {
                var photo = photos[i];
                var offer = offers[i];

                var a = document.createElement("a");
                var article = document.getElementById("offer");
                var img_div = document.createElement("div");
                var container = document.createElement("div");
                var name = document.createElement("h4");
                var price_div = document.createElement("div");
                var offer_price = document.createElement("h1");
                var old_price = document.createElement("span");
                var expired_time = document.createElement("span");
                var title_text_node = document.createTextNode(offer.name);
                var price_text_node = document.createTextNode(offer.price);
                var old_price_text_node = document.createTextNode("35,00");
                var deadline_text_node = document.createTextNode(offer.deadline);


                a.setAttribute("href","ProductPage/"+offer.id_offer);
                /*article.setAttribute("class", "offer clearfix");
                article.setAttribute("id", "offer");*/
                article.setAttribute("style","visibility: visible");
                img_div.setAttribute("class", "img-product");
                container.setAttribute("class", "container-right clearfix");
                name.setAttribute("class", "offer-title");
                price_div.setAttribute("class", "price clearfix");
                offer_price.setAttribute("class", "offer-price");
                old_price.setAttribute("class", "del-price");
                expired_time.setAttribute("class", "expiredtime");
                $('.img-product').css({"background-image":"url("+photo+")", "background-size":"100% 100%"});
                console.log($('.img-product'));
                name.appendChild(title_text_node);

                offer_price.appendChild(price_text_node);

                old_price.appendChild(old_price_text_node);

                expired_time.appendChild(deadline_text_node);
                price_div.appendChild(offer_price);
                price_div.appendChild(old_price);

                container.appendChild(name);
                container.appendChild(price_div);
                container.appendChild(expired_time);

                article.appendChild(img_div);
                article.appendChild(container);

                a.appendChild(article);

                var container = document.getElementById("container");
                container.appendChild(a);
            }

@headmax