2016-09-28 114 views
-1

一些背景:我有一个JavaScript AJAX函数,它获取xml输出。响应被发送到另一个生成正确HTML的javascript函数。我循环访问xml文件以获取内容并构建代码。输出应该是每行最多4个div的行,其中每个div都包含循环的特定输出。如果声明里面的javascript变量

问题:我想检查行中放置了多少个div,以决定是否启动新行。我创建了一个变量块,用于计算当前存在的div的数量,在每个div被放置后它会随着1增加。如果blocks = 4,意味着4行被放置在该行,并且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; 
    } 

完成后,我想将另一分区内输出变量:

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

不幸的是这并没有显示任何结果。

有什么想法?

+0

那么你面临的问题是什么? – Ted

+0

问题是我的代码没有给出任何结果,所以我想知道如果任何人有任何想法如何解决/处理这个?如果xml中有16个项目,则输出应为4行,每行4个块(div)(每个块是行div的子div)。这个HTML必须在/附加到我可以用innerHTML显示的输出变量中创建。 – ILE

回答

0

以上答案启发了我,我想出了这个解决方案。基本上我跟踪附加到一行的块的数量。如果附加了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> 

感谢所有花时间回答和您的建议!