title: How to find/extract data from xml with jQuery
body: <p>I'm trying to extract the StateLongName and StateShortName values from the xml below.</p>
  
  <p>I know there has to be a simple elegant way to do this with jQuery. </p>
  
  <pre><code>&lt;NewDataSet&gt;
    &lt;Table&gt;
      &lt;StateLongName&gt;Alabama&lt;/StateLongName&gt;
      &lt;StateShortName&gt;AL&lt;/StateShortName&gt;
    &lt;/Table&gt;
    &lt;Table&gt;
      &lt;StateLongName&gt;Alaska&lt;/StateLongName&gt;
      &lt;StateShortName&gt;AK&lt;/StateShortName&gt;
    &lt;/Table&gt;
  
  ...elments removed for brevity
  
  &lt;/NewDataSet&gt;
  </code></pre>
  
  <p>Here's what I've tried.</p>
  
  <p>Load the xml from above into a Javascript variable name xml.</p>
  
  <p>Try #1</p>
  
  <pre><code>$(xml).find("TABLE").each(function()
  {
    var stateName = $(this).find("StateLongName").innerText;
    var stateCode = $(this).find("StateShortName").innerText;
  });
  </code></pre>
  
  <p>Try #1 doesn't find anything and never goes inside to load the stateName and stateCode variables.</p>
  
  <p>Try #2</p>
  
  <pre><code>$(xml).find("StateLongName").each(function()
  {
    var stateName = $(this).find("StateLongName").innerText;
    var stateCode = $(this).find("StateShortName").innerText;
  });
  </code></pre>
  
  <p>Try #2 does find matches, however the stateName and stateCode are left undefined.</p>
  
  <p>Try #3</p>
  
  <pre><code>$(xml).find("StateLongName").each(function()
  {
    var stateName = $($(xml).find('StateLongName').parent()[0].innerHTML)[1].data;
    var stateCode = $($(xml).find('StateLongName').parent()[0].innerHTML)[5].data;
  });
  </code></pre>
  
  <p>Try #3 works but there has to be a better way. Please enlighten me.</p>
  
  <p>Thanks for you time!</p>