javascript - 在循环中附加 CSS

Question

我正在尝试将不同的颜色附加到某些文本：

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

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

Answer 1

那是因为append返回所选元素而不是附加元素，因此您正在修改.colors元素的颜色而不是附加元素，最后一个颜色获胜并且后代元素继承颜色属性。

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