Question

一些背景：我有一个javascript AJAX函数，它获取xml输出。响应被发送到另一个生成正确HTML的javascript函数。我遍历xml文件以获取内容并构建代码。输出应该是每行最多4个div的行，其中每个div包含循环的特定输出。

问题：我想检查行中放置了多少div，以决定是否开始新行。我创建了一个变量块，它计算当前存在的div数量，在每个div放置后增加1。如果blocks = 4这意味着在行中放置了4个div，并且var块被设置回0.我想在javascript变量中执行此操作，以便我可以执行客户端的所有操作。完成后，我想通过innerHTML将变量放在HTML元素中。

到目前为止的Javascript（将成为循环的一部分）：

var blocks=0;
var output=
        if(blocks==0)
        {
            '<div id="row"><div id="bl1">block1</div>';
            blocks+=1;
        }

    else if (blocks==1)
    {
        '<div id="bl2">block2</div>';
        blocks+=1;
    }

    else if(blocks==2)
    {
        '<div id="bl3">block3</div>';
        blocks+=1;
    }

    else if(blocks==3)
    {
        '<div id="bl4">block4</div></div>';
        blocks=0;
    }

完成后，我想将输出变量放在另一个div中：

document.getElementById("output-div").innerHTML=output;

不幸的是，这不会显示任何结果。

有什么想法吗？

Answer 1

以上答案激发了我的灵感，我提出了这个解决方案。基本上我会跟踪附加到行的块数量。如果附加4个块，则表示必须首先创建新行。

<div id="output"></div>

<script type="text/javascript">
var list=['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
var index, len;
var row_number=0; // keep track of the row number we're appending blocks to
var block=0; // keep track of amount of blocks created in row_number

for (index = 0, len = list.length; index < len; ++index) {

    if(block==0) // if block=0 then a new row needs to be created
    {
        //create new row and append to output
        var div_row=document.createElement("div");
        div_row.className="logo-row"; // assign className for css purposes
        ++row_number;
        div_row.id="model_row_"+row_number; //assign id for append block purposes
        document.getElementById("output").appendChild(div_row);

        // create new (first) block and append to row
        var div_model=document.createElement("div");
        div_model.className='logo-block'+(block+1); // assign className for css purposes. Eack block could get different styling
        div_model.innerHTML=(list[index]);
        document.getElementById("model_row_"+row_number).appendChild(div_model);
        ++block;
    }

    else if (block==1 | block==2) // a second and third block can be created
    {
        var div_model=document.createElement("div");
        div_model.className='logo-block'+(block+1);
        div_model.innerHTML=(list[index]);
        document.getElementById("model_row_"+row_number).appendChild(div_model);
        ++block;
    }

    else // a fourth block can be created, after which a new row must be created to set block to 0
    {
        var div_model=document.createElement("div");
        div_model.className='logo-block'+(block+1);
        div_model.innerHTML=(list[index]);
        document.getElementById("model_row_"+row_number).appendChild(div_model);
        block=0;
    }
};

</script>

感谢大家花时间回答你的建议!!

如果声明里面有javascript变量

1 个答案: