jQuery 如何使用jQuery从xml中查找/提取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2563101/
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
How to find/extract data from xml with jQuery
提问by Nick Craver
I'm trying to extract the StateLongName and StateShortName values from the xml below.
我正在尝试从下面的 xml 中提取 StateLongName 和 StateShortName 值。
I know there has to be a simple elegant way to do this with jQuery.
我知道必须有一种简单而优雅的方式来使用 jQuery 来做到这一点。
<NewDataSet>
<Table>
<StateLongName>Alabama</StateLongName>
<StateShortName>AL</StateShortName>
</Table>
<Table>
<StateLongName>Alaska</StateLongName>
<StateShortName>AK</StateShortName>
</Table>
...elments removed for brevity
</NewDataSet>
Here's what I've tried.
这是我尝试过的。
Load the xml from above into a Javascript variable name xml.
将上面的 xml 加载到 Javascript 变量名 xml 中。
Try #1
尝试 #1
$(xml).find("TABLE").each(function()
{
var stateName = $(this).find("StateLongName").innerText;
var stateCode = $(this).find("StateShortName").innerText;
});
Try #1 doesn't find anything and never goes inside to load the stateName and stateCode variables.
尝试 #1 没有找到任何东西，并且永远不会进入内部加载 stateName 和 stateCode 变量。
Try #2
尝试 #2
$(xml).find("StateLongName").each(function()
{
var stateName = $(this).find("StateLongName").innerText;
var stateCode = $(this).find("StateShortName").innerText;
});
Try #2 does find matches, however the stateName and stateCode are left undefined.
Try #2 确实找到了匹配项，但是 stateName 和 stateCode 未定义。
Try #3
尝试 #3
$(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;
});
Try #3 works but there has to be a better way. Please enlighten me.
尝试 #3 有效，但必须有更好的方法。请赐教。
Thanks for you time!
谢谢你的时间！
回答by Nick Craver
It's case sensitive, use "Table"like this:
它区分大小写，"Table"像这样使用：
$(xml).find("Table").each(function() {
var stateName = $(this).find("StateLongName").text();
var stateCode = $(this).find("StateShortName").text();
});
Update: Sorry this one was a bit baffling, don't use <table>, it treats it as html creating a <tbody>and things get stranger from there:) If you changed it to just abut anything else, it'll work, here's an example with it changed to <tabl>: http://jsfiddle.net/Yvetc/
更新：对不起，这个有点莫名其妙，不要使用<table>，它把它当作 html 创建一个<tbody>，事情从那里变得奇怪:) 如果你把它改成只靠其他任何东西，它会起作用，这是一个例子改为<tabl>：http: //jsfiddle.net/Yveetc/
Here's a full bare test page:
这是一个完整的裸测试页面：
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var xml="<NewDataSet><Tabl><stateLongName>Alabama</stateLongName><stateShortName>AL</StateShortName></Tabl><Tabl><StateLongName>Alaska</StateLongName><StateShortName>AK</StateShortName></Tabl></NewDataSet>";
$(xml).find("Tabl").each(function() {
var stateName = $(this).find("StateLongName").text();
var stateCode = $(this).find("StateShortName").text();
alert("State: " + stateName + " Code: " + stateCode);
});
</script>
</head>
<body>
</body>
</html>
回答by Ali Habibzadeh
$.ajax({
type: "GET",
url: "labels.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('label').each(function(){
var id_text = $(this).attr('id')
var name_text = $(this).find('name').text()
$('<li></li>')
.html(name_text + ' (' + id_text + ')')
.appendTo('#update-target ol');
}); //close each(
}
}); //close $.ajax(
sample xml for this:
示例 xml：
<?xml version="1.0" encoding="iso-8859-1"?>
<labels>
<label id='ep' added="2003-06-10">
<name>Ezra Pound</name>
<address>
<street>45 Usura Place</street>
<city>Hailey</city>
<province>ID</province>
</address>
</label>
<label id='tse' added="2003-06-20">
<name>Thomas Eliot</name>
<address>
<street>3 Prufrock Lane</street>
<city>Stamford</city>
<province>CT</province>
</address>
</label>
<label id="lh" added="2004-11-01">
<name>Langston Hughes</name>
<address>
<street>10 Bridge Tunnel</street>
<city>Harlem</city>
<province>NY</province>
</address>
</label>
<label id="co" added="2004-11-15">
<name>Christopher Okigbo</name>
<address>
<street>7 Heaven's Gate</street>
<city>Idoto</city>
<province>Anambra</province>
</address>
</label>
</labels>
