如何更改使用append（）创建的元素的下拉菜单中的文本颜色？

Question

我在JQuery中寻找可以根据值更改元素颜色的东西。 我的下拉列表是动态填充的，在将值附加到下拉列表之前，我有if语句检查该值，如果value等于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;
}