jQuery : Object Literal의 정보로 HTML 복제

Question

div 컨테이너 (.container) 내에서 5 번 반복하려는 다음 HTML이 있습니다.

var main_content = { 
    "content_1": { 
     "name": "Joe", 
     "position": "Baker" 
    }, 
    "content_2": { 
     "name": "Jane", 
     "position": "Waitress" 
    } 
    "content_3", etc 
} 

내가 최고 HTML을 복제하려는 각 블록에 대해, 각각의 객체 리터럴 항목에 대한 이름과 내용을 변경 :

<div class="block"> 
    <div class="name">Name</div> 
    <div class="content>Content</div> 
</div> 

나는 문자 그대로 다음과 같은 목적을 가지고있다. 그래서 나는 HTML의 출력을 아래처럼 보이기를 원한다. 어떻게해야합니까?

<div class="block"> 
    <div class="name">Joe</div> 
    <div class="position>Baker</div> 
</div> 
<div class="block"> 
    <div class="name">Jane</div> 
    <div class="position>Waitress</div> 
</div> 
... 

Answer 1

이것은 비교적 쉽게 jQuery를 사용해야합니다. 이 방법이 효과가 있습니까?

for(var i in main_content) 
{ 
    var name = main_content[i].name, 
    position = main_content[i].position, 

    template = $('<div class="block">\ 
         <div class="name">'+name+'</div>\ 
         <div class="position">'+position+'</div>\ 
        </div>'); 

    template.appendTo($('.container')); 
} 

여기에 작업 jsFiddle 데모>http://jsfiddle.net/jLPkS/

Answer 2

는 루프에서 DOM에 추가 해달라고 참조하십시오

var block, resultHtml = ''; 
for(block in main_content){ 
    resultHtml += '<div class="block"><div class="name">' + main_content[block].name + '</div><div class="position">' + main_content[block].position + '</div></div>' 
} 
$('your-selector').append(resultHtml);