Question

I have this html:

    <div id="wrapper">
<div id="gamelist"></div>
</div>

and i want to place a unordered list in the gamelist div via Jquery.

                var gamenr = 0;
            $.each(response.payload, function(key, value) { 
                    //alert(key + ': ' + value);
                $('#gamelist').append("<ul id='"+gamenr+"' class='game'></ul>");

                $.each(value, function(key, value){
                    //alert(key +': ' + value);     
                    $("#gamelist").attr('id', gamenr).append("<li>"+value+"</li>");
                });
                gamenr++;
            });

The only thing that shows up, is the first value.
gamenr is supposed to make a ‘unique but not so beautifull’ id.

I’d like to know why the rest of the values wont show up.

Thanks in advance,

Tim A

Answer 1

You’re changing the ID of #gamelist on the first iteration, and then you’re trying to append to #gamelist in second iteration etc. which is an element that no longer exists, as you changed the ID in the first iteration :

var gamenr = 0;
$.each(response.payload, function(key, value) {
    var gamelist = $('<ul />', {id: 'a_'+(gamenr++), 'class':'game'});

    $.each(value, function(j, k) {
        var li = $('<li />', {text: k});
        gamelist.append(li);
    });

    $('#gamelist').append(gamelist);
});​