JQuery ne définit pas l'image d'arrière-plan pour div la première fois

Question

J'essaie de définir une image d'arrière-plan à un div avec JQuery. Cela fonctionne s'il y a plus d'une image mais cela ne fonctionne pas s'il y a un seul 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%"); 
    ... 
} 

J'ai essayé de la valeur de photo « d'alerte » avant et après $('.img-product').css("background-image", "url("+photo+")"); déclaration et il fonctionne très bien.

Ceci est le résultat quand il y a plus d'une offre

Ceci est le résultat lorsque la recherche retourne un seul élément

Answer 1

$(document).ready(function() { 
      code... 
      $('input#search_button').click(function (e) { 
      ..code 
      e.preventDefault(); 
      e.stopPropagation(); 
       $.ajax({ 
       ajax call.. 
       success: function (data) { 
        ..code 
        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%"); 
       ... 
      } 
} 
)}; 
)}; 

When I search only one item

Answer 2

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