jquery - Jquery append a list to specific element by id

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

您在#gamelist第一次迭代中更改了 ID，然后您尝试#gamelist在第二次迭代中追加到等，这是一个不再存在的元素，因为您在第一次迭代中更改了 ID：

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);
});​

Answer 2

您将<li>元素附加到同一个<div>块但不附加到附加的<ul>：

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

    $.each(value, function(key, value) {
        $("#" + gamenr).append("<li>" + value + "</li>");
    });

    gamenr++;
});​

Answer 3

看这个

$("#gamelist").attr('id', gamenr)

它会将具有 id 的元素的 id 设置gamelist为 gamenr 的内容。这不是你想要的。试试这个

$('#'+gamenr)

Answer 4

只需更改以下代码

$("#gamelist").attr('id', gamenr).append("<li>"+value+"</li>");

进入下一个

$("#gamelist ul[id='" + gamenr + "']").append("<li>"+value+"</li>");