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

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  2. Rainbow.js
  3. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  4. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  5. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  6. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

コメント

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

  1. 2015年 9月 14日

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP