javascript Jquery 解析 XML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4885962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Parse XML
提问by user580950
I want to read the following XML using JQuery. The Jquery should read the XML and display the following in HTML, all the following should be linked
我想使用 JQuery 读取以下 XML。Jquery 应该读取 XML 并在 HTML 中显示以下内容，以下所有内容都应该链接
News
Articles
---Destinations
---Epics
Tuesday Night Bouldering
My XML Looks like below...
我的 XML 如下所示...
<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>
回答by Gabriele Petrioli
You can do this recursively.
您可以递归地执行此操作。
But you need to make your xml have a root node.
但是你需要让你的xml有一个根节点。
here is a function for your specs (it is core jQuery so I assume the mobile version can cope with it)
这是您的规格的功能（它是核心 jQuery，所以我认为移动版本可以应付它）
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;
}
and here is how to call it
这是如何称呼它
$.ajax({
url:'path-to.xml',
dataType: 'xml',
success: function(data){
var xml = $(data);
$('#container').append( CategoryToUl(xml.children()) );
}
});
demo athttp://www.jsfiddle.net/gaby/UC2dM/1/
演示在http://www.jsfiddle.net/gaby/UC2dM/1/
It creates a structure like this
它创建了这样的结构
<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>
回答by Barrie Reader
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())
});
});
}
});
and the load XML function:
和加载 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;
}
sorry, I feel I should explain - this load_xml()function will work crossbrowser (IE, FireFox, Chrome, Safari etc).
抱歉，我觉得我应该解释一下 - 此load_xml()功能可以跨浏览器（IE、FireFox、Chrome、Safari 等）工作。
回答by Eduard
JQuery gets as easy as this:
JQuery 变得如此简单：
var xml = your xml...
JQuery(xml).find('category').each(function(){
JQuery(xml).find('catID').each(function(){
alert($(this).text())
});
});
回答by Giovesoft
This is the correct AJAX
这是正确的 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())
});
});
}
});
