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

JavaScript

jQueryのeachメソッドのお勉強

今回はjQueryのeachメソッドを使ってみました。なんかとても便利そうなメソッドなのでしっかり覚えたいですね。これを使えば繰り返し処理ができたりするので結構使う機会がありそうな感じです。ということでまた超基本的なサンプルを作りながらの備忘録です。

[ads_center]

eachを使ってみる

以下、サンプル集です。

指定したクラスのテキストを取得して表示する

box1というクラスがついている要素のテキストを取得して、textというIDがついている要素の中に表示するサンプルです。

box1
box2
box3
box4

HTML

<div class="box1">box1</div>
<div class="box1">box2</div>
<div class="box1">box3</div>
<div class="box1">box4</div>
<div id="text"></div>

JavaScript

$(function(){
    $('.box1').each(function(){
        $('#text').text($('.box1').text());
    });
});

textメソッドはテキストを挿入するだけじゃなくて取得もできますね。

CSSで指定されている値を取得する

続いてはbox2というクラスが指定されている各要素のフォントサイズを取得して表示させます。各要素にはCSSでそれぞれ違うフォントサイズの値を指定しています。以下サンプルです。

テキスト1
テキスト2
テキスト3
テキスト4

HTML

<div class="box2-1 box2">テキスト1</div>
<div class="box2-2 box2">テキスト2</div>
<div class="box2-3 box2">テキスト3</div>
<div class="box2-4 box2">テキスト4</div>

CSS

.box2-1 {font-size: 10px;}
.box2-2 {font-size: 12px;}
.box2-3 {font-size: 13px;}
.box2-4 {font-size: 14px;}

JavaScript

$(function(){
    $('.box2').each(function(){
        $(this).append(' のフォントサイズは ' + $(this).css('font-size') + 'です');
    });
});

各要素内の後ろにappendで追加しています。

eachで処理される要素に番号をつけていく

eachで繰り返し処理される各要素に番号をつけていきます。

box1
box2
box3
box4

HTML

<div class="box3">box1</div>
<div class="box3">box2</div>
<div class="box3">box3</div>
<div class="box3">box4</div>

JavaScript

$(function(){
    $('.box3').each(function(i){
        i = i +1;
        $(this).append(' = これは' + i + '番目です');
    });
});

iは0からスタートするので最初に1を足しておきます。

指定した番号の処理をしないようにする

先程の繰り返しの処理で、例えば3番目の処理だけをしないようにするサンプルです。

box1
box2
box3
box4

HTML

<div class="box4">box1</div>
<div class="box4">box2</div>
<div class="box4">box3</div>
<div class="box4">box4</div>

JavaScript

$(function(){
    $('.box4').each(function(i){
        i = i + 1;
        if(i == 3) {
            return true;
        }
        $(this).append(' = これは' + i + '番目です');
    });
});

if文でiが3の時は処理をしないようにreturn trueを指定します。これで、iが3の時だけの処理をやめてそれ以降の4はまた処理されるようになります。これを3以降の処理をしないようにする場合はreturn falseにすればいいみたいです。以下のサイトを参考にしました。

偶数の場合だけテキストの色を変える

最後に、各要素の番号が偶数の場合にテキストカラーを赤にするサンプルです。

box1
box2
box3
box4
box5
box6

HTML

<div class="box5">box1</div>
<div class="box5">box2</div>
<div class="box5">box3</div>
<div class="box5">box4</div>
<div class="box5">box5</div>
<div class="box5">box6</div>

JavaScript

$(function(){
    $('.box5').each(function(i){
        i = i + 1;
        if(i%2 == 0) {
            $(this).css('color', 'red');
        }
        $(this).append(' = これは' + i + '番目です');
    });
});

とても基本的なことしかやってないんですが、それだけでも色んなことができるようになりますね。イベントや他のメソッドなんかと組み合わせることで色々と可能性が広がりそうな感じです。ということでこれからたくさん使っていきたいと思います。

関連記事

  1. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

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

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  3. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  4. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  5. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  6. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

コメント

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

  1. この記事へのトラックバックはありません。

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP