最初に、最後に開始された同じタグを完了/終了する必要があるように、正しい XML 文字列を記述する必要があります。上記のサンプル コードでは、 を閉じるのを間違えています。xml 構文が間違っています。以下のように修正してください: 1 テスト
ここでは、XML データまたはタグを解析するためのサンプル ビンを作成しました。ビンでは Ajax 呼び出しで外部ファイルを呼び出すことができないため、Ajax の代わりにボタン クリック イベントで xml データを解析します。
ここにデモがあります: http://codebins.com/bin/4ldqp7u
HTML
<div>
<input type="button" id="btnxml" value="Get XML Data" />
<input type="button" id="btnreset" value="Reset" style="display:inline"/>
<div id="result">
</div>
</div>
<div id="xmldata">
<products>
<item>
<pk>
1
</pk>
<name>
test
</name>
</item>
<item>
<pk>
2
</pk>
<name>
test2
</name>
</item>
<item>
<pk>
3
</pk>
<name>
test3
</name>
</item>
<item>
<pk>
4
</pk>
<name>
test4
</name>
</item>
</products>
</div>
JQuery:
$(function() {
$("#btnxml").click(function() {
var xml = "<rss version='2.0'>";
xml += $("#xmldata").html();
xml += "</rss>";
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc);
var result = "";
if ($xml.find("item").length > 0) {
result = "<table class='items'>";
result += "<tr><th>PK</th><th>Name</th></tr>";
$xml.find("item").each(function() {
result += "<tr>";
result += "<td>" + $(this).find("pk").text() + "</td>";
result += "<td>" + $(this).find("name").text() + "</td>";
result += "</tr>";
});
result += "</table>";
$("#result").html(result);
}
});
//Reset Result
$("#btnreset").click(function() {
$("#result").html("");
});
});
CSS:
#xmldata{
display:none;
}
table.items{
margin-top:5px;
border:1px solid #6655a8;
background:#55a5d9;
width:20%;
}
table.items th{
border-bottom:1px solid #6655a8;
}
table.items td{
text-align:center;
}
input[type=button]{
border:1px solid #a588d9;
background:#b788d9;
}
デモ: http://codebins.com/bin/4ldqp7u