XML에서 데이터를 HTML로 가져 오기

Question

jQuery로 XML 파일을 구문 분석하고 값을 특정 Div 컨테이너에 넣습니다. 그러나 이제 문제는 마크 업이 잘못되었음을 나타냅니다. 여기 내 jQuery를 수 있습니다 :

$(xml).find('section').each(function() { 

     $('.main').append('<div class="tab-container"><div class="tab">' + $(this).attr('name') + '</div>'); 

     $(this).find('sub').each(function() { 

      $('.main').append('<div class="tab_content">' + $(this).attr('name') + '</div>'); 

      $(this).find('date').each(function() { 

       $('.main').append($(this).attr('name') + '<br />'); 

       $(this).find('detail').each(function() { 

        $('.main').append($(this).attr('from') + ' - ' + $(this).attr('to') + '<br />'); 

       }); 

      }); 


     }); 

     $('.main').append('</div>'); 


    }); 

그리고 그게 내가 클래스 "탭 컨테이너"와 사업부 내부 클래스 "tab_content"로 사업부를 필요로하는 HTML 마크 업

<div class="main"> 
<div class="tab-container"> 
    <div class="tab">Brand Events</div> 
</div> 
    <div class="tab_content">Brand Events</div> 
</div> 

입니다. 내 스크립트의 실수는 무엇입니까 ?? 불완전한 구문

Answer 1

직접 추가 JQuery와 객체는 쉬운 방법이 바로 객체에 대한 참조를 유지하는 것입니다 문제

, 그리고 올바른 사람을 추가 할 수있다. 그것은 ... 쉽게 조정하기 쉽게 읽고, 할 수

예 :

<div class="tab-container"> 
    <div class="tab">section1</div> 
    <div class="tab_content"> 
     sub1<br>date1<br>from - to<br> 
    </div> 
</div> 

다음 출력을 제공 http://jsfiddle.net/Icepickle/GtvFr/

$('#fakedata').find('section').each(function() { 
    var main = $('.main'), 
     section = $('<div class="tab-container"></div>'); 

    section.appendTo(main); 

    $('<div class="tab">' + $(this).attr('name') + '</div>').appendTo(section); 
    $(this).find('sub').each(function() { 
     var sub = $('<div class="tab_content">' + $(this).attr('name') + '</div>'); 

     sub.appendTo(section); 
     $(this).find('date').each(function() { 
      sub.append('<br />' + $(this).attr('name')); 
      $(this).find('detail').each(function() { 
       sub.append('<br />' + $(this).attr('from') + ' - ' + $(this).attr('to') + '<br />'); 
      }); 
     }); 
    }); 
    $('#innerHTML').text($('.main').html()); 
});