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. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  2. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  3. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  4. Glide.js

    JavaScript

    軽量・フレキシブル・高速なスライダー&カルーセル実装「Glide.js」

    Glide.jsは軽量・フレキシブル・高速なJavaScript ES…

  5. JavaScript

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「equalize.js」

    高さや幅が不揃いの要素をキレイに揃えてくれるjQueryプラグイン「e…

  6. no-image

コメント

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

  1. 2015年 9月 14日

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP