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

what do you have in response.payload?

Om3ga
– Om3ga

2012-10-31 12:01:14 +00:00
Commented Oct 31, 2012 at 12:01 — Om3ga
– Om3ga, Commented Oct 31, 2012 at 12:01

adeneo · Accepted Answer · 2012-10-31 12:09:39Z

2

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

edited Oct 31, 2012 at 12:09

answered Oct 31, 2012 at 12:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim A Over a year ago

Thanks a lot for your quick awnser. :)

VisioN · Accepted Answer · 2012-10-31 12:01:17Z

0

You append <li> elements to the same <div> block but not to the appended <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++;
});

answered Oct 31, 2012 at 12:01

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

devnull69 · Accepted Answer · 2012-10-31 12:07:22Z

0

Look at this

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

it will set the id for the element with id gamelist to the content of gamenr. This is not what you wanted. Try this instead

$('#'+gamenr)

edited Oct 31, 2012 at 12:07

answered Oct 31, 2012 at 12:02

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Comments

Denis Elkhov · Accepted Answer · 2012-10-31 12:07:51Z

0

just change the following code

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

into next one

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

answered Oct 31, 2012 at 12:07

Denis Elkhov

1762 silver badges10 bronze badges

6 Comments

VisioN Over a year ago

Why not $("#" + gamenr)? It's faster.

Denis Elkhov Over a year ago

it may be another elements with id = 0 or 1, etc. outside #gamelist

VisioN Over a year ago

No, it can't be, otherwise the markup is invalid. Ids should be unique.

Denis Elkhov Over a year ago

it' true if it just one page. but if it just a ajax module - you never can be sure about id=0 :)

VisioN Over a year ago

If you are architect you should be sure :)

|

Collectives™ on Stack Overflow

Jquery append a list to specific element by id

4 Answers 4

1 Comment

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related