Jquery Parse XML

Question

JQuery를 사용하여 다음 XML을 읽고 싶습니다. JQuery와는 모두 다음이 연결되어야하는 XML을 읽고 HTML에 다음과 같이 표시됩니다

내 XML은 다음과 같은데

News 
Articles 
    ---Destinations 
    ---Epics 
Tuesday Night Bouldering 

...

<category> 
    <catId>96</catId> 
    <title>News</title> 
</category> 
<category> 
    <catId>97</catId><title>Articles</title> 
     <category> 
      <catId>101</catId> 
      <title>Destinations</title> 
     </category> 
     <category> 
      <catId>102</catId> 
      <title>Epics</title> 
     </category> 
</category> 
<category> 
    <catId>129</catId> 
    <title>Tuesday Night Bouldering</title> 
</category> 

Answer 1

당신은 재귀 적으로이 작업을 수행 할 수 있습니다.

하지만 XML에 루트 노드가 있어야합니다. 여기

는

function CategoryToUl(xml){ 
    var categories = xml.children('category'); 
    if (categories.length > 0) 
    { 
     var ul = $('<ul/>'); 
     categories.each(function(){ 
      var $this = $(this); 
      var li = $('<li/>'); 
      var a = $('<a/>',{ 
       text: $this.children('title').text(), 
       href: '#' + $this.children('catId').text() 
      }); 
      li.append(a); 
      li.append(CategoryToUl($this)); 
      ul.append(li); 
     }); 
     return ul; 
    } 
    return null; 
} 

를 (가 핵심 jQuery를 그래서 난 모바일 버전이 대응할 수있는 가정입니다 ) 귀하의 사양하는 기능이며, 여기

$.ajax({ 
    url:'path-to.xml', 
    dataType: 'xml', 
    success: function(data){ 
     var xml = $(data); 
     $('#container').append(CategoryToUl(xml.children())); 
    } 
}); 

를 호출하는 방법입니다 데모에서http://www.jsfiddle.net/gaby/UC2dM/1/

그것은 JQuery와 모바일이 부하 XML 기능 작동 내가 아이폰에 의미합니다이

<ul> 
    <li><a href="#96">News</a></li> 
    <li><a href="#97">Articles</a> 
     <ul> 
      <li><a href="#101">Destinations</a></li> 
      <li><a href="#102">Epics</a></li> 
     </ul></li> 
    <li><a href="#129">Tuesday Night Bouldering</a></li> 
</ul> 

Answer 2

jQuery.ajax({ 
    type: "GET", 
    url: 'your_xml.xml', //edit this to be the path of your file 
    dataType: ($.browser.msie) ? "text/xml" : "xml", 
    success: function(xml) { 
     var xml2 = load_xml(xml); 
     var i=0; 
     $(xml2).find('category').each(function(){ 
      $(xml2).find('catID').each(function(){ 
       //output of catID will be $(this).text() 
       alert($(this).text()) 
      }); 
      $(xml2).find('title').each(function(){ 
       //output of title will be $(this).text() 
       alert($(this).text()) 
      }); 
     }); 
    } 
}); 

와 부하 XML 기능 :

function load_xml(msg) { 
    if (typeof msg == 'string') { 
     if (window.DOMParser)//Firefox 
     { 
      parser=new DOMParser(); 
      data=parser.parseFromString(text,"text/xml"); 
     }else{ // Internet Explorer 
      data=new ActiveXObject("Microsoft.XMLDOM"); 
      data.async="false"; 
      data.loadXML(msg); 
     } 
    } else { 
     data = msg; 
    } 
    return data; 
} 

미안 해요, 내가 설명해야한다고 생각 -이 load_xml() 기능이 crossbrowser 작동합니다 (IE, 전나무 eFox, Chrome, Safari 등).

Answer 3

JQuery와이로 쉽게 가져옵니다

var xml = your xml... 
JQuery(xml).find('category').each(function(){ 
     JQuery(xml).find('catID').each(function(){     
      alert($(this).text()) 
     }); 
}); 

Answer 4

같은 구조가이 올바른 AJAX

jQuery.ajax({ 
    type: "GET", 
    url: 'your_xml.xml', //edit this to be the path of your file 
    dataType: ($.browser.msie) ? "text/xml" : "xml", 
    success: function(xml) { 
     var xml2 = load_xml(xml); 
     var i=0; 
     $(xml2).find('category').each(function(){ 
      var category = $(this); 
      category.find('catID').each(function(){ 
       //output of catID will be $(this).text() 
       alert($(this).text()) 
      }); 
      category.find('title').each(function(){ 
       //output of title will be $(this).text() 
       alert($(this).text()) 
      }); 
     }); 
    } 
});