JQuery:在你追加它的时候得到一个孩子

Question

我在处理json请求时将p标签附加到div,并根据请求中的内容设置样式.

$(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 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