jquery - jQuery:テキストを異なる色でペイントする方法は?

Question

いくつかのテキスト項目を div 要素に追加し、それらを異なる色でペイントしたいと思います。

これが私のコードです：

for (var i = 0; i < data.length; i++) {
    if (data[i].Id <= 2)
        $("#div3").append('<p>' + data[i].FirstName + '</p>').css('color', 'red');
    else if (data[i].Id > 2 && data[i].Id <= 4)
        $("#div3").append('<p>' + data[i].FirstName + '</p>').css('color', 'green');
    else
        $("#div3").append('<p>' + data[i].FirstName + '</p>').css('color', 'blue');
}

しかし、それらはすべて青色です。

何が問題で、どうすれば修正できますか?

Answer 1

appendTo()代わりに使用してください:

 $('<p>' + data[i].FirstName + '</p>').appendTo("#div3").css('color', 'red');

Answer 2

各「p」にクラスを与え、スタイリングをcssに抽象化しようとしましたか? または、インデックスに応じて各 p 要素に id を与えてみてください。このような;

for (var i = 0; i < data.length; i++) {
   if (data[i].Id <= 2){
       $("#div3").append('<p id="p' + i + '">' + data[i].FirstName + '</p>')
       $("#p" + i).css('color', 'red');
   }else if (data[i].Id > 2 && data[i].Id <= 4){
       $("#div3").append('<p id="p' + i + '">' + data[i].FirstName + '</p>')
       $("#p" + i).css('color', 'green');
   }else{
       $("#div3").append('<p id="p' + i + '">' + data[i].FirstName + '</p>')
       $("#p" + i).css('color', 'blue');
   }
}

Answer 3

これを使って：

$("#div3").append('<p style="color:red">' + data[i].FirstName + '</p>');