if statement in javascript variable

Question

일부 배경 : xml 출력을 가져 오는 javascript AJAX 기능이 있습니다. 응답은 적절한 HTML을 생성하는 다른 javascript 함수로 전송됩니다. 콘텐츠를 잡고 코드를 작성하기 위해 XML 파일을 반복합니다. 출력은 행당 최대 4 개의 div가있는 행이어야하며 각 div에는 루프의 특정 출력이 들어 있습니다.

문제점 : 행에 얼마나 많은 div가 있는지 확인하여 새 행을 시작할 것인지 여부를 결정하고 싶습니다. 나는 현재 존재하는 div 수를 세는 가변 블록을 만들었는데, 각 div가 배치 된 후 1로 증가합니다. block = 4이면 4 개의 div가 행에 배치되고 var 블록은 0으로 다시 설정됩니다. 모든 것을 클라이언트 쪽에서 수행 할 수 있도록 javascript 변수 내에서이 작업을 수행하고 싶습니다. 작업이 끝나면 변수를 innerHTML을 통해 HTML 요소 안에 넣기를 원합니다.

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

불행하게도이 어떤 표시되지 않습니다 완료되면

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 내부 출력 변수를 배치 할 :

자바 스크립트 지금까지 (루프의 일부가 될 것입니다) 결과.

의견이 있으십니까?

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> 

답변 해 주셔서 감사합니다.