JQuery Traverse XML。如何让它充满活力？

Question

我有以下JQuery代码，它可以解析XML文件。在它下面，您还可以找到它解析的XML文件。如您所见，根节点称为GetArchive，后跟另一个名为Y2012的节点。

Y2012是一年节点，可能包含一年中的所有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>

Answer 1

如果可能的话，我谨建议你重建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
            });
        });
    });
});