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

我需要迭代三个输入字段；这三个元素都共享同一个类，并且都具有具有唯一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_fields_container.length=3。所以这是有道理的。但是for循环会迭代12次！它到底在迭代什么？我如何将它仅限于输入元素

下面是它的具体执行方式：

对三个输入字段进行清理，以便控制台日志清晰地显示field1、field2和field3。初始控制台日志语句显示布局字段容器的长度为3

循环完成后，显然会返回到selectLayout方法的开头。因此调用了initial console.log，长度仍然是3

它再次回到循环中，这次它在每个输入字段中迭代两次。因此console.log在for循环中打印field1、field1、field2、field2、field3、field3

仍然在循环中，它会打印另外两行：1）“函数项（）{[native code]}和2）函数namedItem（）{[native code]}

---

为什么要返回循环？集合中的这些额外项从何而来？

您正在用

在

中对…进行迭代。这是错误的，在一定程度上做了错误的事情，在这里也是错误的：您还将迭代非数字索引

将循环转换为标准的：

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

for（变量i=0；i

Wow.这种不一致性。很多bug。Do loop。所以Jquerascript。除了Jon提供的解决方案，你能解释一下你所说的其他bug吗？我很想修复它们，但我需要知道它们是什么。对不起，我只是喜欢Doge meme！你没有bug，只是不一致的编码风格。你设置了一个变量使用jQuery时为le，使用JS时为下一个，使用CamelCase命名一个，使用under_分数命名下一个。在

if

语句中，将loose（！=）和strict（！=）进行比较（严格是一种方法）。然后，您需要值的

类型（冗余检查）…它将始终返回
String
，从不“未定义”。并且在jquery函数中使用
this
，而不是
$（this）
（允许事件委派）。但是整个函数毫无意义，你的第二个if永远不会触发。明白了。谢谢。但是为什么集合中有更多项时长度会返回3？我假设那些非数字索引是列表中的项？@BrianKempf:不，它们是对象的属性。试试这个：
var arr=[0，1，2]；arr.whatch=”惊喜“；
然后，

中的

超过
arr
。除了明显的索引之外，您将获得
任何东西的密钥。哦，这是有道理的；显然，我没有正确阅读文档。谢谢您再问一个问题。9/12次迭代都是针对集合中的项目。我打算在集合中有3个项目TIONG（返回的.length为3）。为什么它会在项目上重复迭代两次呢？@BrianKempf:可能是您意外嵌套了循环？3*3=9？
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++;
            }
        }
    }
}

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