如何在下拉菜单中更改使用 append() 创建的元素的文本颜色

Question

我正在 JQuery 中寻找可以根据值更改元素颜色的东西。我动态填充了我的下拉列表，在我将值附加到下拉列表之前，我有检查值的 if 语句，如果值等于 1，我想更改该元素的颜色，如果不保持原样。这是我的代码：

for(var i=0; i < myArray.length; i++){
    if(myArray[i].idFour == '1'){
        $('#users').append('<option value='+myArray[i].idOne+'>'+myArray[i].idTwo+'</option>');
        $('#users option').css('color','red');
        }else{
            $('#users').append('<option value='+myArray[i].idOne+'>'+myArray[i].idTwo+'</option>');
        }
} 

上面的代码正在更改所有元素的颜色，从下拉列表的顶部一直到实际应该为红色的元素。我的问题是为什么之前的所有元素都是红色的？如何仅从 myArray[i].idFour 中获取值为 1 的元素的红色文本颜色？如果有人可以提供帮助，请告诉我。谢谢。

Answer 1

正如@Mottie提到的，你最好创建一个字符串并将其附加到 DOM 一次：

var optionList = $();
for(var i=0; i < myArray.length; i++){
    var option = '<option ';
    if(myArray[i].idFour == '1'){
        option += 'style="color:red" ';
    }
    option += 'value="'+myArray[i].idOne+'">'+myArray[i].idTwo+'</option>';
    optionList = optionList.add(option);
} 
$('#users').append(optionList);

这是jsFiddle

Answer 2

您可以简单地将类添加到您想要颜色的选项标签中。所以代码将如下所示：

for(var i=0; i < myArray.length; i++){
  if(myArray[i].idFour == '1'){
    $('#users').append('<option class="redColor" value='+myArray[i].idOne+'>'+myArray[i].idTwo+'</option>');
  }
  else{
    $('#users').append('<option value='+myArray[i].idOne+'>'+myArray[i].idTwo+'</option>');
  }
}

并在 css 样式表中创建一个 css 类.redColor：

.redColor {
  color: red;
}