1. 首頁
  2. 問答
  3. JQuery遍歷XML。如何使其動態？

JQuery遍歷XML。如何使其動態？

2011-10-26 52 views
1

我有以下解析XML文件的JQuery代碼，它們應該是這樣。在它下面，您還可以找到它解析的XML文件。正如您所看到的，根節點稱爲GetArchive，後跟另一個名爲Y2012的節點。JQuery遍歷XML。如何使其動態？

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>

來源

2011-10-26 ASPiRE

回答

2

我會恭敬地建議您重建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

+0

是的！你是天才！ – ASPiRE

+0

@Vini我想提一提的是，雖然選擇1月份的數字1更「人性化」，但JavaScript的「getMonth（）」（https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/getMonth）實際上從零開始計數。如果您想使用JS定位XML feed中的當前月份/年份，這一點很重要。 – Blazemonger

相關問題

 相關問題