XMLファイルから特定のタグの要素だけを抽出する方法。

Question

###前提・実現したいこと
xmlファイルの中から特定のタグ内に記述された要素を抽出したいと考えています。

例えば、下記のようなxmlファイルがあり、webページ上に配置されたボタン１とボタン２のうち、ボタン１をクリックすると、１番目の<item>内の<texture_src>の情報（assets/picture1.png）を取得し、ボタン２をクリックすると、２番目の<item>内の<texture_src>の情報（assets/picture2.png）を取得するといった感じです。

###該当のソースコード

<?xml version="1.0" encoding="UTF-8"?>
<info>
  <item>
    <id>type01</id>
    <name>test1</name>
    <texture_src>assets/picture1.png</texture_src>
  </item>
  <item>
    <id>type02</id>
    <name>test2</name>
    <texture_src>assets/picture2.png</texture_src>
  </item>
</info>

何か良い方法はありますでしょうか？
ご回答いただけると助かりますm(._.)m

###補足情報(言語/FW/ツール等のバージョンなど)
jQueryの$.ajaxを使用してxmlファイルを読み込もうと考えています。

###追記
コメントありがとうございます_(..)

###該当のソースコード

<?xml version="1.0" encoding="UTF-8"?>
<info>
  <item type="type01">
    <id>type01</id>
    <name>test1</name>
    <texture_src>assets/picture1.png</texture_src>
  </item>
  <item type="type02">
    <id>type02</id>
    <name>test2</name>
    <texture_src>assets/picture2.png</texture_src>
  </item>
</info>

上記のように<item>にtypeを付与し、クリックするボタンそれぞれのid属性にtypeの値を持たせ、

###該当のソースコード

$(xml).find("item").each(function(){
  if($(this).attr("type") == "type01"){
    var src = $(this).children("texture_src").text();
  }
});

上記のように、typeごとに子要素を探しに行く。といった感じです。

色々試してみてうまく動いた！という感じですので、何か誤りがあるかもしれませんが...

Answer 1

jQuery.parseXML か $.ajax( { dataType:'xml', ... で扱えそうです。

【jQuery リファレンス：jQuery.parseXML】
http://www.jquerystudy.info/reference/utilities/parseXML.html

【jQueryでXMLの読み込み＆出力をする】
http://www.finefinefine.jp/jquery/kiji2203/

【omnioo lab. record | オムニオラボ WEB, ITのお話 Homepageを作る】
http://www.omnioo.com/record/javascriptjquery/jquery_ajax_xml/

Comments

[tarotarosu]

タグに名前（？）をつけることで解決できました。
ご回答ありがとうございました_(._.)_

[kei344]

「タグに名前をつける」について、どのように処理させたか興味が有るので、もしよければ教えていただけませんか？

[tarotarosu]

コメントありがとうございます_(._.)_

###該当のソースコード
```xml
<?xml version="1.0" encoding="UTF-8"?>
<info>
<item type="type01">
<id>type01</id>
<name>test1</name>
<texture_src>assets/picture1.png</texture_src>
</item>
<item type="type02">
<id>type02</id>
<name>test2</name>
<texture_src>assets/picture2.png</texture_src>
</item>
</info>

```

上記のように<item>にtypeを付与し、クリックするボタンそれぞれのid属性にtypeの値を持たせ、

###該当のソースコード
```jquery
$(xml).find("item").each(function(){
if($(this).attr("type") == "type01"){
var src = $(this).children("texture_src").text();
}
});

```

上記のように、typeごとに子要素を探しに行く。といった感じです。

色々試してみてうまく動いた！という感じですので、何か誤りがあるかもしれませんが...

[tarotarosu]

コードが見にくいため質問の追記に書きました_(._.)_

[kei344]

丁寧に返信ありがとうございます！下記のようにも書けると思いますが、「色々試してみてうまく動いた！」が正義です。
$(xml).find("item").each(function(){
if($(this).find("id").text() == "type01"){
var src = $(this).find("texture_src").text();
}
});
ありがとうございました_(._.)_