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. jquery.confirmDialog
  2. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  3. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  4. Simple Sidebar
  5. Custom jQuery Lightbox

    JavaScript

    デザインや使い方がシンプルな「Custom jQuery Lightbox」

    Custom jQuery Lightboxはデザインや使い方がシンプ…

  6. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP