Iterates through a json data string, and clones a HTML DOM template, then replaces the object inside the template, and re-appends it to the specified element. NOICE! Didnt know you could manipulate detached dom objects.

gistfile1.js

$(function()
{
    // Everything should start with 0 when count arrays. Just good practice
    var count = 0;
    
    // We know we're going to need to start with at least one unordered list, so we create it outside the loop. Why not?
    obj = $('<ul>');
    // Now that the blank ul object is created we need to assign it with a unique id. Well we don't *need* to, but it's good
    // for semantics to have IDs be unique.
    //obj.attr('id', 'vid-playlist' + count);
    obj.attr('class', 'video-playlist');
    // This is your for loop, I don't entirely know what's going on with this, I don't use for loops like this very often.
    for (i in jsonData)
    {
        // We clone the template from the DOM. If it's something simple (like the above <ul>) then just create it in the JS,
        // however if you have an object that repeats a lot and has a somewhat complex structure I say just clone it and make
        // sure the original stays hidden (You can even remove it completely from the DOM if you truely want to)
        html = $('li#playlist-template').clone();
        
        // Now that it's cloned we need to make sure it doesn't stay hidden. This will be either changing it's class, or updating
        // it's ID which is what needs to be done in this case. Otherwise the CSS rules will just hide this in the DOM! Doh.
        html.attr('id', count + '_video');
        //find its class and change it to video-playlist
                
        // Nitty girty down and dirty start replacing things in the template. In this case we find all references for a and change
        // the href to be whatever we want. If there are multiple A's in the template make sure you reference by either ID or class!!
        html.find('a').attr('href', '?id=' + jsonData[count].MemberID);
        
        // Keep the kittens shown for now!
        html.find('img').attr('src', 'images/vidThumbs/' + jsonData[count].MemberID + '.jpg').attr('alt', jsonData[count].Name);
        
        // This is where we refernce elements by class since there are multiple spans. If you notice there is text to the left of
        // the span in the DOM keep as little "hard-coded" text in the JS since it's typically easier to change text in a template
        // or HTML file then it is to go hunting through JS. Also this uses the text() method which forces everything to be text.
        // if you're storing HTML in the database or passing HTML back from an Ajax call, etc then you'll want to use append. But
        // no one stores HTML in their databases, right? I mean - what's the point of a template. *narrows eyes at Drupal*.
        html.find('span.name').text(jsonData[count].Name);
        html.find('span.date').text(jsonData[count].Submitted);
        
        // Once we torn and rebuilt this template push it to the ul object. I used appendTo in desperation to see why it wasn't
        // working. This could just as easily be `obj.append(html)` two ways to do something!
        html.appendTo(obj);
        
        // Roll that counter up.
        count++;
        
        // This could go at the bottom.
        // Actually it makes more sense at the bottom.
        // Here is where we decide if we should stop showing children in this UL or not. So if Mobius count of 3 OR! If we're at
        // the end of the jsonData array drop the obj to the DOM, then recreate a brand new obj!
        if ( (count % 4 == 0 && count != 0) || count == jsonData.length)
        {
            $('div.pages').append(obj);
            obj = $('<ul>');
            obj.attr('class', 'video-playlist');
            //obj.attr('id', 'vid-playlistlol' + count);
            
        }
    }
    // Dunno what this is.
    $("#playlist-pages").scrollable({items:".pages"}).navigator({indexed:true});
});