jQueryでウィンドウサイズによって処理を変える

JavaScript

jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

jQueryで普通にif文を使った条件分岐のやり方です。指定したタグやクラス名があった場合や、子要素にそれがあったりした時の処理の振り分けなんかをやりたかったんですが、思ったようにならなかったので調べてみました。で、いくつか見つかったのでメモがてら記事にしてみることにします。

条件分岐の時に使えそうなメソッド

条件によって処理を振り分けることはプログラムを書く上でとても重要な感じがするので、使う頻度も結構ありそうな感じです。

hasClassを使ってクラス名を指定する

hasClassメソッドを使えばクラス名を取得することができます。これを使ってsampleというid名の中にtextというクラス名がある時とない時の処理の振り分けてみます。

JavaScript

$(function(){
    if($('#sample').children().hasClass('text')) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
});

HTML

<div id="sample">
    <div class="text">
        <p>サンプルです</p>
    </div>
</div>

#sampleの中にtextというクラスがあるので実行結果は「見つかりました」になります。

ではこの場合はどうなるでしょうか。

$(function(){
    if($('#sample').children().is('p')) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
});

上記では#sampleの子要素はtextというクラスになるので実行結果は「見つかりませんでした」になります。で、先祖要素である#sampleから直接p要素をあるかどうか指定したい場合は「#sample *」と指定すると、#sample配下すべてを調べてくれます。

$(function(){
    if($('#sample *').children().is('p')) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
});

これで実行すると「見つかりました」になります。便利ですね。以下のサイトが参考になりました。

isメソッドで条件分岐してみる

上記はクラス名を指定した分岐でした。じゃあタグやid名とかはどうするかというと、isメソッドを使うことで可能になります。

JavaScript

$(function(){
    if($('#sample').children().is('#text')) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
});

HTML

<div id="sample">
    <div id="text">
        <p>サンプルです</p>
    </div>
</div>

先程はtextがクラス名だったのに対し、今度はid名にしてみました。これで実行してみると「見つかりました」になります。もちろんid名だけじゃなくてクラス名でもタグなんかも指定可能です。これは結構使い勝手がありそうですね。

先程のhasClassと同様に#sampleに半角+アスタリスクで、先祖要素からも探すことができます。

$(function(){
    if($('#sample *').children().is('p')) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
    // 実行結果:見つかりました
});

lengthをつける

lengthをつけることでも条件分岐をすることができます。

JavaScript

$(function(){
    if($('#sample').children('.text').length) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
});

HTML

<div id="sample">
    <div class="text">
        <p>サンプルです</p>
    </div>
</div>

これもシンプルで使いやすそうな感じですね。単純にHTML文書全体からtextというクラス名があるかどうかで処理を振り分けたい時はこんな感じになります。

$(function(){
    if($('.text').length) {
        $('p').text('見つかりました');
    } else {
        $('p').text('見つかりませんでした');
    }
});

分かりやすいですね。

まとめ

ということでjQueryで条件分岐するやり方は探せば結構あるもんですね。まだ他にも色々ありそうな感じです。もし間違った部分やこうした方がいいといった部分があったら指摘してくれるとてもとうれしいです。以上、jQueryの条件分岐でした。

とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる前のページ

jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ次のページ

関連記事

  1. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  2. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  3. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

  4. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  5. JavaScript

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイン「jQuery Zoom」

    マウスオーバーなどで画像を拡大してくれるシンプルなjQueryプラグイ…

  6. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

コメント

  1. この記事へのコメントはありません。

  1. 2015年 9月 14日

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP