Javascript：在添加 CSS 样式时循环遍历数组答案

【问题标题】：Javascript: Loop through array while adding CSS stylingJavascript：在添加 CSS 样式时循环遍历数组
【发布时间】：2013-03-10 17:04:39
【问题描述】：

我有一个 for 循环。

在循环中有一个 if 语句，如果发现下拉列表为空，则添加错误 css 样式。

我的问题是循环仅循环 3 次，然后在应该循环 15 次时停止......并且我不知道为什么。

单独的循环可以正常工作，但是当我添加 if 语句时，它就变得很奇怪了。

帮助。

这是我的循环

//add all the id's in an array. array size is 15
var drop_down=["Cars_chassis","Cars_model".....];

for (var i = 0; i < drop_down.length; i++) {
    //check if dropdown is empty
    if(document.getElementById(drop_down[i]).value == ""){

        //change the color of border 
        $('#'+drop_down[i]).css('border-color' , '#dddcdc');
     }
}

【问题讨论】：

你能用你的例子创建一个 jsfiddle 吗？循环似乎没有任何奇怪的东西会导致它中断。

标签： javascript css loops

【解决方案1】：

我建议为这些元素中的每一个添加一个 CSS 类，而不是指定它们的 id。当一个班级可以解决问题时，为什么还要管理所有这些 ID？

<select id="Cars_chassis" class="bordered-select"></select>
<!-- Add class to other 15 -->

此时，您可以在 CSS 中为这些下拉菜单静态定义样式。

.bordered-select{
   border-color: #DDDCDC;
}

或者使用类选择器设置元素的样式。看来您使用的是 jQuery，所以下面的例子可以工作。

$(".bordered-select").css('border-color', '#DDDCDC');

如果您只需要突出显示那些没有值的元素，则以下内容将从匹配的元素集中删除那些没有值的元素：

$(".bordered-select").filter(function(){
  return $(this).val() == "";
}).css("border-color", "#DDDCDC");

工作示例： http://jsfiddle.net/v4hQz/

【讨论】：

【解决方案2】：

var drop_down=["Cars_chassis","Cars_model".....];

for (var i = 0; i < drop_down.length; i++) {
    //check if dropdown is empty
    if( $('#' + drop_down[i]).value == ""){

        //change the color of border 
        $('#'+drop_down[i]).css('border-color' , '#dddcdc');
     }
}

或者你可以试试

var drop_down=["Cars_chassis","Cars_model".....];
var contents = $('#'  + drop_down[i]);
for (var i = 0; i < drop_down.length; i++) {
    //check if dropdown is empty

    if( $(contents[0]).value == ""){

        //change the color of border 
        $('#'+drop_down[i]).css('border-color' , '#dddcdc');
     }
}

【讨论】：

【解决方案3】：

document.getElementById(drop_down[i]); //returns a HTML DOM Object

var contents = $('#' + drop_down[i]);  //returns a jQuery Object

您可以尝试将 if (javascript) 替换为 if (jquery 语法)

【讨论】：