JQuery: заполучить ребенка, как вы добавляете его

Question

Я добавляю p тегов в div при обработке запроса json и хотел бы оформить его в соответствии с тем, что содержится в запросе.

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

Редактировать: Спасибо, Фортес и Веггерби оба работали, но в итоге я пошел с Фортесом, потому что сделал.

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

Вероятно, может быть сжат еще больше.

Edit:

конденсированный как:

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

Answer 3

Некоторые браузеры / версии не поддерживают CSS-селектор last-child. В этом случае они часто игнорируют его и возвращают все элементы, соответствующие оставшейся части селектора. Возможно, это то, что вы видите.

Как обычно IE является одним из таких браузеров .

подход veggerby должен помочь вам обойти необходимость использования: last-child.