How can I optimize my routine to build HTML tiles from an array?

Question

As my last question was closed for being "too vague" - here it is again, with better wording.

I have a "grid" of li's that are loaded dynamically (through JavaScript/jQuery), the Array isn't huge but seems to take forever loading.

So, SO people - my question is:
Am I being stupid or is this code taking longer than it should to execute?

Live demo: http://jsfiddle.net/PrPvM/ (very slow, may appear to hang your browser)

Full code (download): http://www.mediafire.com/?xvd9tz07h2u644t

Snippet (from the actual array loop):

var gridContainer = $('#container');
    var gridArray = [ 
        2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
        0,0,0,0,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
    ];

    function loadMap() {
        var i = 0;
        while (i <= gridArray.length) {
            var gridHTML = $(gridContainer).html();
            $(gridContainer).html(gridHTML+'<li class="node"></li>');
            i++;
        }
        $('li.node').each(function() {
            $(gridArray).each(function (i, val) {
                if (val == '0') { gridTile = 'grass.jpg' };
                if (val == '1') { gridTile = 'mud.jpg' };
                if (val == '2') { gridTile = 'sand.gif' };
                $($('ul#container :nth-child('+i+')'))
                  .css({ 'background-image': 'url(img/tiles/'+gridTile });
            });
        });
    }

Answer 1

It'd probably be farm more efficient to build up the complete HTML for the array and then assign it to the .html property of the container, rather than assigning each individual li:

    var gridHTML = $(gridContainer).html();
    while (i <= gridArray.length) {
       gridHTML = gridHTML+'<li class="node"></li>';
        i++;
    }
    $(gridContainer).html();

---

Next, why are you looping over both of these? The outer loop is probably completely unnecessary, because your inner loop already uses nth-child to select the proper node.

    $('li.node').each(function() {
        $(gridArray).each(function (i, val) {