title: JQuery children loop XML
body: <p>Using JQuery and AJAX, I am getting an XML document and then looping through the document in an attempt to do something at each level of the XML tags/nodes, from parent to children and then children of children respectively. </p>
  
  <p>What i have currently works but is specifically written to a limit of children of children of children (Not ideal).</p>
  
  <p>The final application may have an open ended number of children to do the action to. </p>
  
  <p><code>How can i make this account for any number of children without the inefficiency?</code></p>
  
  <p>I have tried making a function with the basis of what i wish to achieve at each child level. But this does not work as expected, essentially breaking the script. </p>
  
  <p><strong>The function</strong></p>
  
  <pre><code>function childX() {
      $(this).children().each(function()
      {
         $("#output").append("&lt;div id='"+(this).nodeName+"'&gt;"+(this).nodeName+"&lt;/div&gt;&lt;br /&gt;");
      });
  }
  </code></pre>
  
  <p><strong>The main script</strong></p>
  
  <pre><code>  $(xml).find("RecentTutorials").children().each(function()
    {
  
      $("#output").append("&lt;div id='"+(this).nodeName+"'&gt;"+(this).nodeName+"&lt;/div&gt;&lt;br /&gt;");
  
  
      $(this).children().each(function()
      {
         $("#output").append("&lt;div id='"+(this).nodeName+"'&gt;"+(this).nodeName+"&lt;/div&gt;&lt;br /&gt;");
  
        $(this).children().each(function()
          {
             $("#output").append("&lt;div id='"+(this).nodeName+"'&gt;"+(this).nodeName+"&lt;/div&gt;&lt;br /&gt;");
  
              $(this).children().each(function()
              {
                 $("#output").append("&lt;div id='"+(this).nodeName+"'&gt;"+(this).nodeName+"&lt;/div&gt;&lt;br /&gt;");
  
              });
  
          });
  
      });
  
  
    //alert((this).nodeName);
    }); 
  </code></pre>