Setting background image with jQuery not working
<p>Good Day</p>

<p>I want to dynamically set the background images on a div, inside a li element, so that I do not have to specify each div's background image individually....</p>

<p>My code (JS) however,is not working.
Also see my <a href="http://jsfiddle.net/RK5B4/1/" rel="nofollow">FIDDLE</a></p>

<p>HTML:</p>

<pre><code>&lt;div id="imageWrapper"&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;div&gt;&lt;/div&gt; &lt;span&gt;&lt;/span&gt;

        &lt;/li&gt;
        &lt;li&gt;
            &lt;div&gt;&lt;/div&gt; &lt;span&gt;&lt;/span&gt;

        &lt;/li&gt;
        &lt;li&gt;
            &lt;div&gt;&lt;/div&gt; &lt;span&gt;&lt;/span&gt;

        &lt;/li&gt;
        &lt;li&gt;
            &lt;div&gt;&lt;/div&gt; &lt;span&gt;&lt;/span&gt;

        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#imageWrapper ul li div {
    width: 65px;
    height: 65px;
    background-position: center center;
}
</code></pre>

<p>JS</p>

<pre><code>$(document).ready(function () {
    var length = 4; //This is the number of images I have to add
    for (i = 0; i &lt; length; i++) {
        $('#imageWrapper ul li div').css('background', 'url(/path/images/' + i '.jpg)');
    }
});
</code></pre>

<p>Also, this list of images I want to load is pretty big. What is the best way to load so many images and populate them in the DOM without having to write out all the html and css - thats just stupid</p>

<p>Thank you</p>
