Javascript 在循环中附加CSS

我正在尝试向某些文本添加不同的颜色：

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

var s=[“红色”、“绿色”]；
对于（i=0；i

---

两个跨度的输出都是绿色的，但我的意图是第一个跨度是红色的，只有第二个跨度是绿色的。我做错了什么？

这是因为

append

返回的是所选元素而不是追加的元素，因此您正在修改

元素的颜色。颜色
元素不是追加的元素，最后一个颜色获胜，子代元素继承颜色属性

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

$（“TEXT”）.css（“color”，s[i]）。追加到（“colors”）；
这是因为
append
返回的是所选元素而不是所附加的元素，因此您正在修改
元素的颜色。colors
元素不是所附加的元素，最后一个color获胜，子代元素继承color属性

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

$（“TEXT”）.css（“color”，s[i]）。追加到（“colors”）；