Javascript循环逻辑不正确

时间:2015-05-14 14:56:38

标签: javascript html asp.net vb.net dom

function authorNumbering() {
    var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
    var labels = [];
    var nameForLabels = ["Author 1", "Author 2", "Author 3", "Author 4", "Author 5", "Author 6", "Author 7"]; 
    for (var i = 0; i < authorDivs.length; i++) {
        var labelsFromDiv = authorDivs[i].getElementsByTagName("label");
        for (var x = 0; x < labelsFromDiv.length; x++) {
            if (!(typeof labelsFromDiv.item(x) === "undefined" || labelsFromDiv.item(x) == null)) { 
                labels[x] = labelsFromDiv.item(x);

            }
        }
        labels[i].innerHTML = nameForLabels[i];
    }
}

本质上,函数(或至少它在我脑中的作用)经过并从作者div中获取一堆标签。然后,我将标签(未定义或为空)保存到数组中。我现在希望能够更改标签,如上所示(x)但由于某种原因,x始终为0或1.我尝试了几件事,但我没有我认为我理解逻辑足以弄清楚它的正确性。 labels[]在数组中也有重复项,如何在仍有两个循环时避免重复?

我是JavaScript的新手,但我正在努力。

编辑1:哇,我真的搞砸了我想要做的事情。感谢您帮助我更新了代码。

我想要做的是使用nameForLabels数组中的标签重命名标签。这适用于第一个标签,但后来我收到以下错误:TypeError: labels[i] is undefined

这种情况正在发生,因为labels永远不会超过1的长度,我认为每次都会重写它而不是写入数组中的下一个位置。为什么x永远不会高于0?

我希望看到labels数组中的所有标签都更改为nameForLabels数组中的标签。例如,labels[0]中的标签将变为Author 1,而labels[1]将变为Author 2,依此类推。

编辑2:添加了HTML示例:

<div style="display: block;" id="authorView" class="form-horizontal">
    <div id="author0" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author0" id="lblauthor0">Author 1:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author1" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author1" id="lblauthor1">Author 2:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author2" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author2" id="lblauthor2">Author 3:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author3" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author3" id="lblauthor3">Author 4:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
    <div id="author4" class="form-group">
        <div class="col-sm-4 control-label"><label class="" for="author4" id="lblauthor4">Author 5:</label></div>
        <div class="col-sm-8">
            <div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

我不认为这是您的代码,因为您无法使用函数名称循环...除此之外,它确实有效。

https://jsfiddle.net/utswp2v0/

<script type="text/javascript">

    function FindGoodFunctionName() {
        var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
        var labels = [];

        for (var i = 0; i < authorDivs.length; i++) {
            var labelsFromDiv = authorDivs[i].getElementsByTagName("label");
            for (var x = 0; x < labelsFromDiv.length; x++) {
                // Just "Not" ! the if statement, don't need to have a empty one
                if (typeof labelsFromDiv.item(x) === "undefined" || labelsFromDiv.item(x) == null) {  }
                else {
                    labels[x] = labelsFromDiv.item(x);
                    labels[x].innerHTML = "Author 1";
                    labels[x].innerHTML = "Author 2";
                    labels[x].innerHTML = "Author 3"; // This is weird, assigning 3 different value to the same label
                }
            }
        }
    }

</script>

<div id="authorView">
    <div><label></label><label></label><label></label></div>
    <div><label></label><label></label><label></label></div>
    <div><label></label><label></label><label></label></div>
</div>

<input type="button" onclick="FindGoodFunctionName();" value="test" />

<强>更新

以下是html的外观。

function FindGoodFunctionName() {
    var authorLabels = document.getElementById('authorView').getElementsByTagName("label");
    var labels = [];

    for (var i = 0; i < authorLabels.length; i++) {
        labels[i] = authorLabels[i];
        labels[i].innerHTML = "aaaa";
    }
}