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機能の仕事は、私がiphoneに意味します。この

<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()) 
      }); 
     }); 
    } 
});