title: Looping through XML with jQuery
body: <p>I've got some basic code that can loop through some XML that's generated from Adobe RoboHelp (for our help documentation). This works fine, but since a topic could be nested as many time as the writer wants, i need a better way to loop through this XML rather than just nesting <code>.each()</code> loops.</p>
  
  <p>Here's what the XML looks like</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!--RoboML: Table of Content--&gt;
  &lt;roboml_toc&gt;
    &lt;page title="Welcome" url="Welcome.htm"/&gt;
   &lt;book title="Getting Started" url="Getting_Started/Initial_Setup.htm"&gt;
     &lt;page title="Initial Setup" url="Getting_Started/Initial_Setup.htm"/&gt;
     &lt;page title="Customize Settings" url="Getting_Started/Settings.htm"/&gt;
   &lt;/book&gt;
   &lt;book title="Administrator Services" url="Administrator_Services/General_Administrator.htm"&gt;
    &lt;book title="Portal Workspace" url="Administrator_Services/Portal_Workspace/AdminHome.htm"&gt;
      &lt;page title="Home" url="Administrator_Services/Portal_Workspace/AdminHome.htm"/&gt;
      &lt;page title="Portal Accounts" url="Administrator_Services/Portal_Workspace/Portal_Accounts.htm"/&gt;
  
    &lt;/book&gt;
    &lt;book title="SpamLab" url="Administrator_Services/SpamLab/SpamLab_Admin_General.htm"&gt;
      &lt;page title="Alerts" url="Administrator_Services/SpamLab/Alerts.htm"/&gt;
      &lt;page title="Spam Quarantine" url="Administrator_Services/SpamLab/Admin_Spam_Quarantine_.htm"/&gt;
  
    &lt;/book&gt;
  
   &lt;/book&gt;
   &lt;book title="User Services" url="User_Services/General_User.htm"&gt;
    &lt;book title="Portal Workspace" url="User_Services/Portal_Workspace/Home.htm"&gt;
      &lt;page title="Home" url="User_Services/Portal_Workspace/Home.htm"/&gt;
      &lt;page title="Self Help" url="User_Services/Portal_Workspace/Self_Help.htm"/&gt;
    &lt;/book&gt;
    &lt;book title="SpamLab" url="User_Services/SpamLab/SpamLab_General.htm"&gt;
      &lt;page title="Spam Quarantine" url="User_Services/SpamLab/Spam_Quarantine.htm"/&gt;
      &lt;page title="Virus Quarantine" url="User_Services/SpamLab/Virus_Quarantine.htm"/&gt;
    &lt;/book&gt;
  
    &lt;book title="Encryption" url="User_Services/Encryption/Encryption_General.htm"&gt;
      &lt;page title="Outlook Plug-in" url="User_Services/Encryption/Encryption_Outlook_Plug_in.htm"/&gt;
    &lt;/book&gt;
   &lt;/book&gt;
  &lt;/roboml_toc&gt;
  </code></pre>
  
  <p>A <code>&lt;page&gt;</code> is an article, and a <code>&lt;book&gt;</code> is a folder.</p>
  
  <p>Her's my jQuery code, which only can look one level deep of  tags</p>
  
  <pre><code>   //Get the TOC
  $tocOutput="";
  $.get(tocURL,function(toc){
      $(toc).children().each(function(){
          $tocOutput+="&lt;li&gt;&lt;a href='"+$(this).attr("url")+"'&gt;"+$(this).attr("title")+"&lt;/a&gt;";
          if(this.tagName=="BOOK"){
              $tocOutput+="&lt;ul&gt;";
              $(this).find("page").each(function(){
                  $tocOutput+="&lt;li&gt;&lt;a href='"+$(this).attr("url")+"'&gt;"+$(this).attr("title")+"&lt;/a&gt;&lt;/li&gt;";
              });
              $tocOutput+="&lt;/ul&gt;";
          }
          $tocOutput+="&lt;/li&gt;";
      });
      $("#list").html($tocOutput);
  </code></pre>
  
  <p>I know there's a better way to just loop through all elements and then determine if the element has children, etc. but I just can't think of how to do it.</p>
  
  <p>Any help is greatly appreciated!</p>