動的要素に背景画像を設定する

Question

動的に作成された要素に背景画像を設定しようとしていますが、動作していないようです。私は配列に入れたオブジェクトの "img"プロパティを取って、それをバックグラウンドイメージURLに使用することになっています。

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> 

私は動作するはずと思われる要素を検査？私は

https://jsfiddle.net/qmr32463/

Answer 1

"background-image"が無効なjQueryの方法です...途方に暮れてよ。一方、.css()ので、

代わりの

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

有効です用途：

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

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