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の条件分岐でした。

関連記事

  1. parallax-background.js
  2. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  3. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  4. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

  5. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  6. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

コメント

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

  1. 2015年 9月 14日

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP