JQuery: get a child as you append it
<p>I am appending p tags to a div as I process a json request and would liek to style it according to what is in the request.</p>

<pre><code>$(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("&lt;p&gt;" + ups + ":" + downs + " &lt;a href=\"" + url + "\"&gt;" + title + "&lt;/a&gt;&lt;p&gt;");
                $("#redditbox :last-child").css('font-size', ups%20); //This is the line in question
            });
            $("#titlebox h1").append(total/numberOfEntries);
        });
    }

    populatePage()

    $(".button").click(function() {
        populatePage();
    });
});
</code></pre>

<p>Unfortunately things are not quite working out as planned. The styling at the line in question is applying to every child of the div, not just the one that happens to be appended at the time, so they all end up the same size, not sized dependent on their numbers.</p>

<p>how can I apply a style to the p tags as they are appended ot the div?</p>

<p>Edit: Thanks Fortes and Veggerby both worked, but i went with Fortes in the end because I did.</p>
