質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

11298閲覧

xmlの要素をスマートに取得する方法。

tarotarosu

総合スコア114

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/13 08:34

###前提・実現したいこと
下記のようなJavaScriptとxmlファイルがあるとします。
変数shapeの値に一致する<shape>の中で、<category><id>を見ていき、変数category_idの値と一致した場合、<item>の<sample_src>をHTMLのimgタグとして出力する。
ということを行いたいのですが、どう記述するとスマートに目的のものを取得できるでしょうか?
ご回答を頂けると助かります_(..)

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

javascript

1var shape = "aaa01"; 2var category_id = "ccc02";

xml

1<?xml version="1.0" encoding="UTF-8"?> 2<info> 3 <shape type="aaa01"> 4 <item type="bbb01"> 5 <id>bbb01</id> 6 <category> 7 <id>ccc01</id> 8 </category> 9 <sample_src>assets/test1.png</sample_src> 10 </item> 11 <item type="bbb02"> 12 <id>bbb02</id> 13 <category> 14 <id>ccc01</id> 15 <id>ccc02</id> 16 </category> 17 <sample_src>assets/test2.png</sample_src> 18 </item> 19 </shape> 20 <shape type="aaa02"> 21 <item type="bbb01"> 22 <id>bbb01</id> 23 <category> 24 <id>ccc01</id> 25 <id>ccc02</id> 26 </category> 27 <sample_src>assets/test1.png</sample_src> 28 </item> 29 <item type="bbb02"> 30 <id>bbb02</id> 31 <category> 32 <id>ccc01</id> 33 <id>ccc02</id> 34 </category> 35 <sample_src>assets/test2.png</sample_src> 36 </item> 37 </shape> 38</info> 39

###試したこと
下記のように記述すると一応目的のもの(この場合、<shape type="aaa01">内の<item type="bbb02">内の<sample_src>の要素)が取得されます。
しかし、この書き方はかなり回りくどいことをしているような気がして…

javascript

1$.ajax({ 2 url: "xml/test.xml", 3 type: "GET", 4 dataType: "xml", 5 timeout: 1000, 6 error: function(){ 7 alert("ロード失敗"); 8 }, 9 success: function(xml){ 10 $(xml).find("shape").each(function(){ 11 if($(this).attr("type") == shape){ 12 $(this).find("item").each(function(){ 13 $(this).children("category").children("id").each(function(){ 14 if ($(this).text() == color_category) { 15 $(this).parent("category").parent("item").each(function(){ 16 $("#tabBox1 ul").append('<li><img src="' + $(this).find('sample_src').text() + '"></li>'); 17 }); 18 } 19 }); 20 }); 21 } 22 }); 23 } 24});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

javascript

1$(xml).find("shape").each(function(){ 2 if($(this).attr("type") == shape){ 3 $(this).find("item").each(function(){ 4 $(this).children("category").children("id").each(function(){

これぐらいにまとまりますね。

javascript

1$(xml).find('shape[type="'+ shape + '"] > item > category > id').each(function(i, e){

このあとTextNodeの値を比較してるので

javascript

1 if($(e).text() == color_category){ 2 var sample_src = $($(e).parent().parent().find('sample_src')[0]).text(); 3 // 後続処理省略 4 }

とすればsample_srcのTextNodeがとれるんじゃないでしょうか。

投稿2016/06/13 09:17

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tarotarosu

2016/06/15 06:40

ご回答を参考にコードを書き直したところうまく処理が実行できました。 おかげさまで簡潔で理解しやすいコードになったと思います。 本当にありがとうございました_(._.)_
guest

0

find("shape[type= 'aaa01'] > item[type='ccc02'] > sample_source") じゃダメですか?

投稿2016/06/13 08:53

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問