使用jquery解析XML节点元素

Question

我有一个像下面的XML我想解析使用jquery，并得到像我写下面的Java脚本来解析它。我已经尝试了下面的代码，但我能够得到的位置不是采用以下格式，如我所料。

预期结果：

S1:E1:https://location1 
S2:E2:https://location1 

XML：

<Country> 
    <State> 
     <id>S1</id>  
     <City> 
      <E1>  
       <location>https://location1</location> 
      </E1>  
     </City> 
     <County> 
      <E2>  
       <location>https://location2</location>    
      </E2> 
     </County> 
    </State>  
    <State> 
     <id>S2</id> 
     <City> 
      <E1>  
       <location>https://location3</location> 
      </E1>  
     </City> 
     <County> 
      <E2>  
       <location>https://location4</location>    
      </E2>  
     </County>  
    </State> 
</Country> 

代码

var container = $(document.body);  
var xml = '<Country> <State> <id>S1</id> <City> <E1> <location>https://location1</location> </E1> </City> <County> <E2> <location>https://location2</location> </E2> </County> </State> <State> <id>S2</id> <City> <E1> <location>https://location3</location> </E1> </City> <County> <E2> <location>https://location4</location> </E2> </County> </State> </Country>', 
xmlDoc = $.parseXML(xml), 
$xml = $(xmlDoc), 
$location = $xml.find('location');  
container.append($("<p/>", { "text" : $location.text() })); 

Answer 1

尝试像，

var container = $(document.body); 

var xml = '<Country> <State> <id>S1</id> <City> <E1> <location>https://location1</location> </E1> </City> <County> <E2> <location>https://location2</location> </E2> </County> </State> <State> <id>S2</id> <City> <E1> <location>https://location3</location> </E1> </City> <County> <E2> <location>https://location4</location> </E2> </County> </State> </Country>', 
xmlDoc = $.parseXML(xml), 
$xml = $(xmlDoc), 
$location = $xml.find('location'); // will return all location elements  
$location.each(function(){ 
    container.append($("<p/>", { "text" : $(this).text() })); 
}); 

Demo

更新后的代码，以显示与ID导致

var container = $(document.body); 

var xml = '<Country> <State> <id>S1</id> <City> <E1> <location>https://location1</location> </E1> </City> <County> <E2> <location>https://location2</location> </E2> </County> </State> <State> <id>S2</id> <City> <E1> <location>https://location3</location> </E1> </City> <County> <E2> <location>https://location4</location> </E2> </County> </State> </Country>', 
    xmlDoc = $.parseXML(xml), 
    $xml = $(xmlDoc), 
    $location = $xml.find('location'); // will return all location elements  
$location.each(function() { 
    container.append($("<p/>", { 
     "text": 
      $(this).closest('State').find('id').text() + ':' + // get State ID like S1,S2 
      $(this).closest('City').find(':first-child').prop('tagName') + ':' + // get City's location tag like E1,E2 
      $(this).text() // get the location text like location1,location2.... 
    })); 
}); 

Updated Demo