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文を使ったやり方だったら、どんどん階層が深くなってしまうところですが、この方法ならスッキリです。

追記 2019/03/06

その他、色々な演算子も使用可能

【.find】はjQuery的にセレクタの扱いなので、HTMLと同じくXMLの属性に対してを色々な演算子で指定できるようです。なので、例えば

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

[出力結果]テリーマン,キン肉マン,ネプチューンマン

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

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

などなども使用できます。下記まとめてみました。

  • 肯定文:$(xml).find(“[ 属性 = ‘値’ ]”)
  • 否定文:$(xml).find(“[ 属性 != ‘値’ ]”)
  • 前方一致:$(xml).find(“[ 属性 ^= ‘値’ ]”)
  • 後方一致:$(xml).find(“[ 属性 $= ‘値’ ]”)
  • 部分一致:$(xml).find(“[ 属性 *= ‘値’ ]”)
  • 単語一致:$(xml).find(“[ 属性 ~= ‘値’ ]”)
  • 派生一致:$(xml).find(“[ 属性 |= ‘値’ ]”)

派生一致は少しややこしいので、サンプルコードのページで結果をお確かめ下さい。【-】(ハイフン)付きの完璧超人は取得されますが、【(】付きのは取得されません。今は使いどころが分からんが、覚えればきっとソナタの役に立つであろう(プリンスカメハメ談)。
サンプルコードページ

//おまけ: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
}

jQueryを学ぶなら…この本あたりだな

スポンサーリンク

スポンサーリンク

jQueryでXML要素を属性指定で値を一発取得できた!(if文を使わずにですよ?)」への2件のフィードバック

Hatchsandwich.com へ返信する コメントをキャンセル

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