JQuery Traverse XML. 동적으로 만드는 방법?

XML 파일을 구문 분석해야하는 다음 JQuery 코드가 있어야한다. 그 아래에 파싱 한 XML 파일도 있습니다. 보시다시피 루트 노드는 GetArchive이고 Y2012라는 다른 노드가옵니다.JQuery Traverse XML. 동적으로 만드는 방법?

Y2012는 1 년 노드이며 12 개월을 모두 포함 할 수 있습니다. 매월 많은 항목이 포함될 수 있으며 각 항목에는 많은 의견이 포함될 수 있습니다.

내 질문은 아래 코드처럼 하드 코드 할 필요가 없도록 내 코드를 어떻게 변경합니까? 어떻게하면 내 코드가 몇 년의 노드가 있는지를 확인하고 아래에있는 것처럼 각 노드를 파싱 할 수 있습니까?

어떤 도움을 주셔서 감사합니다.

$.get('getArchive.xml', null, function (data) { 

    // PARSE 2012 JANUARY NODES. 

       var ul = $('<ul/>').fadeIn(1000).appendTo('#GetArchive'); 

     var JanEntries = $(data).find('GetArchive Y2012 Jan Entry').each(function(){ 

    var JanEntryId = $(this).find("id").text(); ul.append('<li>' + JanEntryId + '</li>'); 
    var JanEntryDate = $(this).find("date").text(); ul.append('<li>' + JanEntryDate + '</li>'); 
    var JanEntryTime = $(this).find("time").text(); ul.append('<li>' + JanEntryTime + '</li>'); 
    var JanEntrytitle = $(this).find("title").text(); ul.append('<li>' + JanEntrytitle + '</li>'); 
    var JanEntryBody = $(this).find("body").text(); ul.append('<li>' + JanEntryBody + '</li>'); 

    $(this).find("Comment").each(function() { 
    var CommentId  = $(this).find("cid").text(); ul.append('<li>' + CommentId + '</li>'); 
    var CommentDate = $(this).find("cdate").text(); ul.append('<li>' + CommentDate + '</li>'); 
    var CommentTime = $(this).find("ctime").text(); ul.append('<li>' + CommentTime + '</li>'); 
    var CommentFrom = $(this).find("cfrom").text(); ul.append('<li>' + CommentFrom + '</li>'); 
    var CommentBody = $(this).find("cbody").text(); ul.append('<li>' + CommentBody + '</li>'); 
    }); 

}); 

    // PARSE 2012 FEBRUARY NODES. 

       var ul = $('<ul/>').fadeIn(1000).appendTo('#GetArchive'); 

     var JanEntries = $(data).find('GetArchive Y2012 Feb Entry').each(function(){ 

    var FebEntryId = $(this).find("id").text(); ul.append('<li>' + FebEntryId + '</li>'); 
    var FebEntryDate = $(this).find("date").text(); ul.append('<li>' + FebEntryDate + '</li>'); 
    var FebEntryTime = $(this).find("time").text(); ul.append('<li>' + FebEntryTime + '</li>'); 
    var FebEntrytitle = $(this).find("title").text(); ul.append('<li>' + FebEntrytitle + '</li>'); 
    var FebEntryBody = $(this).find("body").text(); ul.append('<li>' + FebEntryBody + '</li>'); 

    $(this).find("Comment").each(function() { 
    var CommentId  = $(this).find("cid").text(); ul.append('<li>' + CommentId + '</li>'); 
    var CommentDate = $(this).find("cdate").text(); ul.append('<li>' + CommentDate + '</li>'); 
    var CommentTime = $(this).find("ctime").text(); ul.append('<li>' + CommentTime + '</li>'); 
    var CommentFrom = $(this).find("cfrom").text(); ul.append('<li>' + CommentFrom + '</li>'); 
    var CommentBody = $(this).find("cbody").text(); ul.append('<li>' + CommentBody + '</li>'); 
    }); 

}); 

    // PARSE 2011 JANUARY NODES. 

       var ul = $('<ul/>').fadeIn(1000).appendTo('#GetArchive'); 

     var JanEntries = $(data).find('GetArchive Y2011 Jan Entry').each(function(){ 

    var JanEntryId = $(this).find("id").text(); ul.append('<li>' + JanEntryId + '</li>'); 
    var JanEntryDate = $(this).find("date").text(); ul.append('<li>' + JanEntryDate + '</li>'); 
    var JanEntryTime = $(this).find("time").text(); ul.append('<li>' + JanEntryTime + '</li>'); 
    var JanEntrytitle = $(this).find("title").text(); ul.append('<li>' + JanEntrytitle + '</li>'); 
    var JanEntryBody = $(this).find("body").text(); ul.append('<li>' + JanEntryBody + '</li>'); 

    $(this).find("Comment").each(function() { 
    var CommentId  = $(this).find("cid").text(); ul.append('<li>' + CommentId + '</li>'); 
    var CommentDate = $(this).find("cdate").text(); ul.append('<li>' + CommentDate + '</li>'); 
    var CommentTime = $(this).find("ctime").text(); ul.append('<li>' + CommentTime + '</li>'); 
    var CommentFrom = $(this).find("cfrom").text(); ul.append('<li>' + CommentFrom + '</li>'); 
    var CommentBody = $(this).find("cbody").text(); ul.append('<li>' + CommentBody + '</li>'); 
    }); 

}); 

    // PARSE 2011 FEBRUARY NODES. 

       var ul = $('<ul/>').fadeIn(1000).appendTo('#GetArchive'); 

     var JanEntries = $(data).find('GetArchive Y2011 Feb Entry').each(function(){ 

    var FebEntryId = $(this).find("id").text(); ul.append('<li>' + FebEntryId + '</li>'); 
    var FebEntryDate = $(this).find("date").text(); ul.append('<li>' + FebEntryDate + '</li>'); 
    var FebEntryTime = $(this).find("time").text(); ul.append('<li>' + FebEntryTime + '</li>'); 
    var FebEntrytitle = $(this).find("title").text(); ul.append('<li>' + FebEntrytitle + '</li>'); 
    var FebEntryBody = $(this).find("body").text(); ul.append('<li>' + FebEntryBody + '</li>'); 

    $(this).find("Comment").each(function() { 
    var CommentId  = $(this).find("cid").text(); ul.append('<li>' + CommentId + '</li>'); 
    var CommentDate = $(this).find("cdate").text(); ul.append('<li>' + CommentDate + '</li>'); 
    var CommentTime = $(this).find("ctime").text(); ul.append('<li>' + CommentTime + '</li>'); 
    var CommentFrom = $(this).find("cfrom").text(); ul.append('<li>' + CommentFrom + '</li>'); 
    var CommentBody = $(this).find("cbody").text(); ul.append('<li>' + CommentBody + '</li>'); 
    }); 

});  

}, 'xml');

그리고 여기에 구문 분석 한 XML 파일이 있습니다.

<?xml version="1.0" encoding="utf-8"?> 
<GetArchive> 
    <Y2012> 
    <Jan> 
     <Entry> 
     <id>&lt;b&gt;Jan Entry ID 1&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Jan Comment ID 1</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Jan Comment ID 2</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
     <Entry> 
     <id>&lt;b&gt;Jan Entry ID 2&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Jan Comment ID 3</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Jan Comment ID 4</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
    </Jan> 
    <Feb> 
     <Entry> 
     <id>&lt;b&gt;Feb Entry ID 1&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Feb Comment ID 1</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Feb Comment ID 2</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
     <Entry> 
     <id>&lt;b&gt;Feb Entry ID 2&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Feb Comment ID 3</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Feb Comment ID 4</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
    </Feb> 
    </Y2012> 
    <Y2011> 
    <Jan> 
     <Entry> 
     <id>&lt;b&gt;Jan Entry ID 1&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Jan Comment ID 1</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Jan Comment ID 2</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
     <Entry> 
     <id>&lt;b&gt;Jan Entry ID 2&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Jan Comment ID 3</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Jan Comment ID 4</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
    </Jan> 
    <Feb> 
     <Entry> 
     <id>&lt;b&gt;Feb Entry ID 1&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Feb Comment ID 1</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Feb Comment ID 2</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
     <Entry> 
     <id>&lt;b&gt;Feb Entry ID 2&lt;/b&gt;</id> 
     <date>entry date</date> 
     <time>entry time</time> 
     <title>entry title</title> 
     <body>entry &lt;b&gt;body&lt;/b&gt;! html friendly</body> 
     <Comments> 
      <Comment> 
      <cid>Feb Comment ID 3</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
      <Comment> 
      <cid>Feb Comment ID 4</cid> 
      <cdate>comment date</cdate> 
      <ctime>comment time</ctime> 
      <cfrom>comment from</cfrom> 
      <cbody>comment body! text only</cbody> 
      </Comment> 
     </Comments> 
     </Entry> 
    </Feb> 
    </Y2011> 
</GetArchive>

출처

2011-10-26 ASPiRE

가능하면 XML 문서를 다시 작성하는 것이 좋습니다. <Y2012>은 <Year num="2012">이고 <Jan>은 <Month abbr="Jan" num="1">과 같아야합니다. 더 일관성이있을뿐만 아니라 프로그래밍 방식으로 반복하는 것이 더 쉽습니다.

$(data).find('Year').each(function() { 
    $(this).find('Month').each(function() { 
     $(this).find('Entry').each(function() { 
      // append id, date, time, title, body 
      $(this).find('Comment').each(function() { 
       // append comment id, date, time, from, body 
      }); 
     }); 
    }); 
});

출처

2011-10-26 19:13:56 Blazemonger

예! 너 천재 야! – ASPiRE

@Vini 1 월의 1 번을 선택하는 것이 "사람"인 반면, JavaScript의 getMonth() (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date)/getMonth) 실제로 실제로 0부터 계산을 시작합니다. 이것은 JS를 사용하여 XML 피드에서 현재 월/년을 찾으려는 경우에만 중요합니다. – Blazemonger

JQuery Traverse XML. 동적으로 만드는 방법?

답변

관련 문제