bl6.jp

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

[ads_center]

eachを使ってみる

以下、サンプル集です。

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

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

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でそれぞれ違うフォントサイズの値を指定しています。以下サンプルです。

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で繰り返し処理される各要素に番号をつけていきます。

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番目の処理だけをしないようにするサンプルです。

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にすればいいみたいです。以下のサイトを参考にしました。

jQuery の each() の continue / break は・・・ – 地潜の日記

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

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

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 + '番目です');
    });
});

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