这个 for 循环有什么问题？答案

【问题标题】：What is wrong with this for loop?这个 for 循环有什么问题？
【发布时间】：2013-01-08 20:30:20
【问题描述】：

大家好，我有一个要附加到 DOM 的数组！代码如下：

function inputFeedContent(data){
    for(var k=0; k < columns; k++) {
        var col = "<div class='col-1'>";
        for(var j=0; j < data.sample[k].length; j++) {
            col += "<p>"+data.sample[k][j]+"</p>";
        }
        col += "</div>";
        $('.sliding-window').append(col);
    }
}

其中列 = 12。

问题是我只得到其中五个：

<div class="col-1">
    <p>Some text</p>
</div>

我在这里做错了什么？记住我是菜鸟:)

谢谢！

【问题讨论】：

你检查过'data'数组的长度吗？
你想得到什么输出？
数据长度 = 5。我想实现 12 列
每列包含五个
Content
columns 看起来可能是一个神奇的数字？ columns 是如何分配到 12 的？
我有另一个循环通过标题所以列 = data.headers.length;

标签： javascript jquery arrays for-loop

【解决方案1】：

我认为您正在尝试单独打印每一列，因此不是逐行打印。试试这个：

function inputFeedContent(data) {
    for(var k=0; k < columns; k++) {
     var col = "<div class='col-1'>";
     for(var j=0; j < data.sample.length; j++) {
        col += "<p>"+data.sample[j][k]+"</p>";
     }
     col += "</div>";
     $('.sliding-window').append(col);
    }
}

【讨论】：

【解决方案2】：

可能是您的数组没有 12 列，因此不要将列定义为全局变量试试这个

function inputFeedContent(data){
var col=[];
for(var k=0; k < data.sample.length; k++) {

       col.push("<div class='col-1'>");
        for(var j=0; j < data.sample[k].length; j++) {
            col.push("<p>"+data.sample[k][j]+"</p>");
        }
        col.push("</div>");

    }
$('.sliding-window').append(col.join(''));
}

我还建议您避免字符串连接，因为它在循环中效率不高，并通过将其保持在循环之外进行一次 dom 访问。

【讨论】：

【解决方案3】：

如果data 包含的列数不正确，您会收到错误，并且会停止添加到您的页面。您可以使用以下内容确保列已正确初始化：

function inputFeedContent(data){
    var sampleData = data.sample || [];
    for(var k=0; k < columns; k++) {
        var col = "<div class='col-1'>";
        var columnData = sampleData[k] || [];

        for(var j=0; j < columnData.length; j++) {
            col += "<p>"+columnData[j]+"</p>";
        }
        col += "</div>";
        $('.sliding-window').append(col);
    }
}

...但可能不应该支持这种情况，你应该抛出一个错误：

function inputFeedContent(data){
    var sampleData = data.sample || [];
    if(sampleData.length != columns){ 
        throw "inputFeedContent:  Sample data does not have the right number of columns.";
    }

    ..//Your code
}

【讨论】：