div를 동적으로 만들고 div의 목록을 자바 스크립트

Question

을 사용하여 생성 된 div 안에 추가합니다. 자바 스크립트를 통해 div를 만들어야합니다. div 안에는 div (동적으로로드되는) 목록을 추가해야하므로 div (생성 된) div에 테두리를 적용 할 예정입니다. 예 : 만약 내가 동적으로 10 div의로드, 나는 3 div의 모든 부모 div에 테두리를 적용 할 수 있도록 모든 3 div의 부모 div를 만들어야합니다.

<div class="main"> 
    <div class="div_item"> 
     item 1 
    </div> 
    <div class="div_item"> 
     item 2 
    </div> 
    <div class="div_item"> 
     item 3 
    </div> 
    <div class="div_item"> 
     item 4 
    </div> 
    <div class="div_item"> 
     item 5 
    </div> 
    <div class="div_item"> 
     item 6 
    </div> 
    <div class="div_item"> 
     item 7 
    </div> 
    <div class="div_item"> 
     item 8 
    </div> 
</div> 

이러한 항목의 경우 각 3 개의 div에 대해 상위 div를 만들어야합니다. 누구든지 솔루션을 찾을 수 있도록 도와 줄 수 있습니까?

Answer 1

요소 컨테이너가있는 경우 jQuery append() 함수를 사용하여 요소를 컨테이너에 추가 할 수 있습니다. 요소를 통해 루프를 확인하고 물론 3

var nodes = 21; // total number of nodes 

for (var i=0; i<nodes; i++) 
{ 
    if(i%3==0) { 
     $('#container').append('<div class="parent"></div>'); 
    } 

    $('.parent').last().append('<div class="child">child '+ i +'</div>'); 
} 

Fiddle1

의 그룹을 포장이 조각은 데이터가 백엔드 스크립트에 Ajax 호출에서 즉,로드되는 경우로 확장 될 수있다 (두 번째 루프에서는 nodes.length을 사용하므로 결과의 크기를 모르더라도 루프 할 수 있습니다).

// Create array (can be made with data load from backend) 
var total = 21; 
var nodes = new Array(); 

for (var i=0; i<total; i++) 
{ 
    var desc = "child" + i; 
    var node = {id:i, description:desc}; 
    nodes.push(node); 
} 

// Output results 
for (i=0; i<nodes.length; i++) 
{ 
    if(i%3==0) { 
     $('#container').append('<div class="parent"></div>'); 
    } 

    $('.parent').last().append('<div class="child">'+ nodes[i].description +'</div>'); 
}  

Fiddle2