Einstellung Hintergrundbild auf dynamisches Element

Question

Ich versuche, ein Hintergrundbild auf einem dynamisch erstellten Element zu setzen, aber es scheint nicht zu funktionieren. Es soll die "img" -Eigenschaft eines Objekts nehmen, das ich in ein Array eingegeben habe, und dieses dann für die Hintergrundbild-URL verwenden.

Javascript:

var sponsorArray = new Array(); 

//Sponsor Constructor Function 
function Sponsor(name, img, tier, url, description) { 
    this.name = name; 
    this.img = img; 
    this.tier = tier; 
    this.url = url; 
    this.description = description; 

    //A counter for the number of sponsors 
    Sponsor.num = (Sponsor.num || 0) + 1; 

    //Insert this object into the sponsors array 
    sponsorArray.push(this); 
}; 

var sponsor0 = new Sponsor(
    'test sponsor', 
    './images/sponsors/test.png', 
    'Platinum', 
    'test.com', 
    'blah blah blah' 
); 

var initSponsors = function() { 
    for (var i = 0; i < sponsorArray.length; i++) { 

     var sponsor_image = $('<li>', { 
      'class': 'sponsor-logo', 
      'id': 'sponsor' + i, 
      'background-image': 'url(\'' + sponsorArray[i].img + '\')' 
     }); 

     $('#logo-sponsors').append(sponsor_image); 
    } 
}; 

initSponsors(); 

HTML:

<ul id="logo-sponsors"> 
</ul> 

Wenn ich inspizieren das Element scheint es, dass es funktionieren sollte? Ich bin ratlos ...

https://jsfiddle.net/qmr32463/

Answer 1

"background-image" eine ungültige jQuery-Methode. .css() auf der anderen Seite gültig ist, so

statt

 'background-image' : 'url(\'' + sponsorArray[i].img + '\')' 

Verwendung:

 css : { 
      backgroundImage: 'url(\'' + sponsorArray[i].img + '\')' 
     } 

https://jsfiddle.net/qmr32463/1/