jQuery selectors for list elements

Question

I am using jQuery and jQuery UI.

Using the getJSON function, we are creating list elements and appending them to an OL element. Here's the code:

$.getJSON("http://localhost/b/t.php", function(data){

        $.each(data, function(i, thet){
            //alert(thet.fname)
            var t = '<li class="name" id="p' + thet.pid + '">' + thet.pid + ' ' + thet.fname + ' ' + thet.lname + '</li>';

            $(t).appendTo("#" + thet.tour + 'list');

        });
    });

I am trying to select list elements using jQuery. If I manually put a list in the HTML page, it will work. However, programatically appending the list items to an OL, doesn't allow it to select - at least from what I've tried.

$('li:last-child').css({color: 'red', backgroundColor: 'black'});

I've tried using ID's and many other multiple selectors, to no avail.

Any ideas?

Answer 1

When are you trying to execute that command that colors the list items? I believe you'll have to put at the end of the callback function of getJSON as follows:

$.getJSON("http://localhost/b/t.php", function(data){
    $.each(data, function(i, thet){
     //alert(thet.fname)
     var t = '<li class="name" id="p' + thet.pid + '">' + thet.pid + ' ' + thet.fname + ' ' + thet.lname + '</li>';

     $(t).appendTo("#" + thet.tour + 'list');
    });
    $('li:last-child').css({color:'red',backgroundColor:'black'});
});