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

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

大概可以进一步浓缩。

编辑：

凝结状：

$("#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的方法应该可以帮助您解决需要使用：最后一个孩子。