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