JQuery：在追加时获取一个孩子答案

【问题标题】：JQuery: get a child as you append itJQuery：在追加时获取一个孩子
【发布时间】：2010-10-09 20:16:09
【问题描述】：

我在处理 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，因为我做到了。

【问题讨论】：

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案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);

可能会更进一步。

编辑：

浓缩如：

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

【讨论】：

【解决方案3】：

某些浏览器/版本不支持 :last-child CSS 选择器。在这种情况下，他们通常会忽略它并返回与选择器其余部分匹配的所有元素。这可能就是您所看到的。

像往常一样IE is one such browser。

veggerby 的方法应该可以帮助您解决使用 :last-child 的需要。

【讨论】：