javascript - CSS をループに追加する

Question

一部のテキストに異なる色を追加しようとしています:

var s = ["red", "green"];   
for (i=0; i < s.length; i++) {
    $(".colors").append("<span>TEXT </span>").css("color", s[i]);
}

両方のスパンの出力は緑ですが、私の意図は、最初のスパンが赤になり、2 番目のスパンだけが緑になるということでした。私は何を間違っていますか？

score 7 · Accepted Answer

これappendは、追加された要素ではなく選択された要素を返すため、追加された要素ではなく要素の色を変更しているためです.colors。最後の色が優先され、子孫要素が color プロパティを継承します。

$("<span>TEXT</span>").css("color", s[i]).appendTo(".colors");

1 に答える 1