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的方法應該可以幫助您解決需要使用：最後一個孩子。