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. socialShare.js
  2. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  3. no-image

    JavaScript

    インタラクティブなツリー機能を実装できる「jstree」

    jstreeはインタラクティブなツリー機能を実装できるjQueryプラ…

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

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  5. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  6. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP