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 元素的颜色而不是附加元素，最后一个颜色wins 和后代元素继承 color 属性。

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