JQuery: получить ребенка, когда вы его добавили

Question

Я добавляю p-теги к div, когда обрабатываю запрос json и подставляю его в соответствии с тем, что находится в запросе.

$(document).ready(function() { 
    function populatePage() { 
     var numberOfEntries = 0; 
     var total = 0; 
     var retrieveVal = "http://www.reddit.com/" + $("#addressBox").val() + ".json"; 
     $("#redditbox").children().remove(); 
     $.getJSON(retrieveVal, function (json) { 
      $.each(json.data.children, function() { 
       title = this.data.title; 
       url = this.data.url; 
       ups = this.data.ups; 
       downs = this.data.downs; 
       total += (ups - downs); 
       numberOfEntries += 1; 
       $("#redditbox").append("<p>" + ups + ":" + downs + " <a href=\"" + url + "\">" + title + "</a><p>"); 
       $("#redditbox :last-child").css('font-size', ups%20); //This is the line in question 
      }); 
      $("#titlebox h1").append(total/numberOfEntries); 
     }); 
    } 

    populatePage() 

    $(".button").click(function() { 
     populatePage(); 
    }); 
}); 

К сожалению, все не так, как планировалось. Стиль в рассматриваемой строке применяется к каждому дочернему элементу div, а не к тому, который добавляется в то время, поэтому все они имеют одинаковый размер, не зависящий от их числа.

Как применить стиль к тэгам p, поскольку они добавлены в div?

Редактировать: Спасибо Fortes и Veggerby оба работали, но я пошел с Fortes в конце, потому что я это сделал.

Answer 1

Вы можете использовать JQuery's appendTo вместо append. Для примера:

$("<p>" + ups + ":" + downs + " <a href=\"" + url + "\">" + title + "</a><p>") 
    .css('font-size', ups%20) 
    .appendTo('#redditbox'); 

Вот документы для appendTo: http://docs.jquery.com/Manipulation/appendTo

Answer 2

Заменить:

$("#redditbox").append("<p>" + ups + ":" + downs + " <a href=\"" + url + "\">" + title + "</a><p>"); 

с

var p = $("<p>" + ups + ":" + downs + " <a href=\"" + url + "\">" + title + "</a><p>"); 
$("p", p).css('font-size', ups%20) 
$("#redditbox").append(p); 

Может быть, вероятно, конденсируется еще дальше.

Edit:

Сгущенное как:

$("#redditbox").append(
    $("<p></p>").css('font-size', ups%20).append(ups + ":" + downs + " <a href=\"" + url + "\">" + title + "</a>") 
); 

Answer 3

Некоторые браузеры/версии не поддерживают: последний дочерний селектор CSS. В этом случае они часто игнорируют его и возвращают все элементы, соответствующие оставшейся части селектора. Возможно, это то, что вы видите.

Как обычно IE is one such browser.

Подход veggerby должен помочь вам обойти необходимость использования: последний ребенок.