当我通过循环运行返回的元素集合时，JavaScript 正在复制文档获取方法返回的元素

Question

我需要遍历三个输入字段；所有三个共享同一个类，并且所有三个都具有相同的具有唯一 id 的祖父元素。

<div id="layout-fields">
    <div class="form-group">
        <div class="col-sm-4 layout-input-field-container">
            <input class="layout-input-fields" id="id_layout_1" maxlength="50" name="layout_1" type="text" />
        </div>
        <div class="col-sm-4 layout-input-field-container">
            <input class="layout-input-fields" id="id_layout_2" maxlength="50" name="layout_2" type="text" />
        </div>
        <div class="col-sm-4 layout-input-field-container">
            <input class="layout-input-fields" id="id_layout_3" maxlength="50" name="layout_3" type="text" />
        </div>
    </div>
</div>

当用户点击一组图标时，会调用以下事件处理程序：

$(".layout-icons").click(function(){
    selectLayout(this);
});

调用此方法（简称相关代码）：

var selectLayout = function(obj){
    var selectedLayoutValue = $(obj).siblings(".layout-image-description").text();
    var layout_fields_container = document.getElementsByClassName('layout-input-fields');
    var filledInputs = 0;
    var selectedValueAlreadyAssignedInputField = false;

    console.log(layout_fields_container.length);

    for(lfc in layout_fields_container){
        console.log(layout_fields_container[lfc]);
        if(layout_fields_container[lfc].value == selectedLayoutValue) {
            selectedValueAlreadyAssignedInputField = true;
            layout_fields_container[lfc].value = '';

        if(layout_fields_container[lfc].value != '' && typeof layout_fields_container[lfc].value !== "undefined"){
            if(layout_fields_container[lfc].value.length > 0){
                filledInputs++;
            }
        }
    }
}

好的，这就是问题所在。控制台日志说 layout_fields_container.length = 3。所以这是有道理的。但是 for 循环迭代了 12 次！它到底在迭代什么，我怎样才能将它限制在输入元素上？

这正是它的执行方式：

1. 干净运行三个输入字段，以便控制台日志干净地显示 field1、field2、field3。该初始控制台日志语句显示 layout_fields_container 的长度为 3
2. 当循环结束时，它显然会回到 selectLayout 方法的开头。所以调用了初始的console.log，长度仍然是3。
3. 它再次回到循环中，这次它遍历每个输入字段两次。所以 console.log 在 for 循环中打印 field1, field1, field2, field2, field3, field3
4. 仍在循环中，它会打印另外两行 1) "function item() { [native code] } 和 2) function namedItem() { [native code] }

为什么它会通过循环返回？集合中这些额外的项目是从哪里来的？

Answer 1

您正在使用for...in 迭代某些内容。以惊人的百分比执行时间是错误的，在这里也是错误的：您还将迭代非数字索引。

将您的循环转换为标准的for：

for(var i = 0; i < layout_fields_container.length; ++i) {
     // do stuff with layout_fields_container[i]
}