Если утверждение внутри переменной javascript

Question

Некоторые фон: У меня есть функция javascript AJAX, которая извлекает xml-выход. Ответ отправляется на другую функцию javascript, которая генерирует правильный HTML. Я прохожу через XML-файл, чтобы захватить контент и создать код. Выходные данные должны быть строками с максимальным количеством 4 div на строку, где каждый div содержит определенный вывод цикла.

Проблема: Я хочу проверить, сколько divs помещено в строке, чтобы решить, нужно ли начинать новую строку или нет. Я создал переменные блоки, которые подсчитывают количество присутствующих в данный момент div, которое увеличивается с 1 после размещения каждого div. Если block = 4, что означает, что в строке помещено 4 divs, а блоки var возвращаются к 0. Я хотел бы сделать это внутри переменной javascript, чтобы я мог выполнять все на стороне клиента. Когда закончите, я хочу поместить переменную внутри HTML-элемента через innerHTML.

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> 

Спасибо всем, что нашли время ответить и ваши предложения!