jQueryの$(…)ではHTMLだけでなくXMLの要素も指定できる。その方法はXMLデータのDocumentオブジェクトを第2引数に設定することで可能となる。
$.getでXMLファイルを読み込んだとき、受取ったデータはDOMのDocumentオブジェクトになる。
このオブジェクトを$(…)の第2引数に次のように指定する。
Documentオブジェクトobjに含まれる<title>を指定する。
$(‘title’,obj)
例 XMLファイル(bugs.xml)
<gazous xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <gazou no="0"> <title>クワガタ(雄) 撮影場所:野島公園</title> <date>"撮影日時:2012:07:17 16:12:50"</date> <gdata>"img/img000.jpg"</gdata> <memo>身近な昆虫で、大きささと強さから人気はカブトムシと二分する。</memo> </gazou> <gazou no="1"> <title>アブラゼミ 撮影場所:長野県戸隠</title> <date>"撮影日時:2012:07:28 12:13:14"</date> <gdata>"img/img002.jpg"</gdata> <memo>どこにでもいるセミ</memo> </gazou> <gazou no="2"> <title>ヒグラシ(蝉) 撮影場所:岐阜県高山</title> <date>"撮影日時:2012:08:08 07:17:12"</date> <gdata>"img/img003.jpg"</gdata> <memo>夏の早朝と夕方に鳴く</memo> </gazou> <gazou no="3"> <title>ハルゼミ 撮影場所:佐賀県鳥栖</title> <date>"撮影日時:2012:05:12 13:43:55"</date> <gdata>"img/img004.jpg"</gdata> <memo>4月~5月に鳴いている</memo> </gazou> <gazou no="4"> <title>カブトムシ 撮影場所:長崎県諫早</title> <date>"撮影日時:2012:08:21 14:49:29"</date> <gdata>"img/img005.jpg"</gdata> <memo>夜の雑木林などで樹液を出す木に集まってくる</memo> </gazou> </gazous>
jquery
var data = []; $.get('bugs.xml',function(xmldata,statusText,jqXHR){ // xmlファイルをxmldataに読み込む $('gazou',xmldata).each(function(idx,txt){ // <gazou>の数だけdata[0]~[n]にxmldataから // title,date,gdata,memoの値を取出して設定する data[idx] = new Array(); data[idx]['title'] = $('title',this).text(); // thisで示す要素の中から、<title>の値を取出す data[idx]['date'] = $('date',this).text(); // thisで示す要素の中から、<date>の値を取出す data[idx]['gdata'] = $('gdata',this).text(); data[idx]['memo'] = $('memo',this).text(); }); });