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. Responsive Elements
  2. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  3. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

  4. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  5. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  6. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

コメント

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

  1. 2015年 9月 14日

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP