jQueryソースコードのアイコン

jQueryでXML要素を属性指定で値を一発取得できた!(if文を使わずにですよ?)

取り出してif文なんてそんなセッションな

サンプルxml
<xml>
  <superman type="正義超人" type2="リーダー">テリーマン</superman>
  <superman type="正義超人" type2="大王">キン肉マン</superman>
  <superman type="悪魔超人" type2="悪魔六騎士">アシュラマン</superman>
  <superman type="完璧超人" type2="首領">ネプチューンマン</superman>
  <superman type="悪魔超人" type2="七人の悪魔超人">バッファローマン</superman>
</xml>

上記のようなxmlの中から、superman要素の属性値「type」が「悪魔超人」の値を取得したい場合

//if文を使ったやり方のサンプルコード
jQuery(function($){
    var xml=xmlRead("xml/sample.xml")
    $(xml).find("superman").each(function(){
        if($(this).attr("type")=="悪魔超人"){
            alert($(this).text())
        }
    });
});

[出力結果]アシュラマン,バッファローマン

で取得できますが、データ量が多い場合、一つ一つにif文で分岐させるのもどうかなぁと思い、いろいろ調べてみると、ありました!属性値指定しての要素取得!

//属性値指定を使ったやり方のサンプルコード
jQuery(function($){
var xml=xmlRead("xml/sample.xml")
    $(xml).find("superman[type=悪魔超人]").each(function() {
    	alert($(this).text())
    });
});

[出力結果]アシュラマン,バッファローマン

ちょっとだけスッキリします。それに早い(と思う)。

スポンサーリンク

属性値が2つ以上でも使える!

ちなみに2つ以上ときはif文なら

//if文を使ったやり方のサンプルコード
jQuery(function($){
    var xml=xmlRead("xml/sample.xml")
    $(xml).find("superman").each(function(){
        if($(this).attr("type")=="悪魔超人"){
            if($(this).attr("type2")=="悪魔六騎士"){
                alert($(this).text())
            }
        }
    });
});

[出力結果]アシュラマン

となりますが、2つ以上も重ねて使えますので下記のようになります。

//属性値指定を使ったやり方のサンプルコード
jQuery(function($){
    var xml=xmlRead("xml/sample.xml")
    $(xml).find("superman[type=悪魔超人][type2=悪魔六騎士]").each(function() {
        alert($(this).text())
    });
});

[出力結果]アシュラマン

if文を使ったやり方だったら、どんどん階層が深くなってしまうところですが、この方法ならスッキリです。

サンプルコードページ

//おまけ:xml取得のサンプルコード
function xmlRead(path){
    var xmls
    $.ajax({
        url:path,
        dataType:"xml",
        async:false,
        cache:false,
        timeout:1000
    }).done(function(ret){
    	xmls=ret;
    }).fail(function(ret){}
    );
    return xmls
}

スポンサーリンク

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です