jQuery each()の使い方

どうもかわうそです！

今回は『jQuery each()の使い方』を解説します。

eachはforやwhileと同じ繰り返し処理の中の一つです。

使いこなせると記述がグッと短くなります！学んで実践できるようになりましょう。

予備知識として、以下の記事がおすすめです。

Contents

jQuery each()の基本構文
$(object).each()の場合
$.each()の場合
配列を使用するeachを実行する場合
配列を使ったeachの応用

jQuery each()の基本構文

使用方法は2種類あります。

[box class=”box3″]$(object).each(function(index,value){});[/box]

[box class=”box3″]$.each(object,function(index,value){});[/box]

objectには配列やhtml要素が入ります。

繰り返し処理になるので、objectの要素それぞれに対して、同じ処理を繰り返してくれます。

そして、eachによって実行されるファンクションの引数には、indexとvalueが引き渡されます。

これだけでは分かりにくいので、例を使いながら学んでいきましょう！

$(object).each()の場合

以下に例を作ってみました。
$(‘#sample li’)で、複数のリスト要素を取得しています。
そのリスト要素毎にテキストを取得し、リスト要素を追加します。

<ul id="sample">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>
<button id="btn">eachを実行</button>

</ul>

<button id="btn">eachを実行</button>

$('#btn').click(function(){
  $('#sample li').each(function(){
     $('#sample').append('<li>'+$(this).text()+'</li>');
  });
});

$('#btn').click(function(){

$('#sample li').each(function(){

$('#sample').append('<li>'+$(this).text()+'</li>');

});

each()の第一引数には、indexが入ります。これも試してみましょう

[box class=”box3″]$(object).each(function(index,value){});[/box]

<ul id="sample2">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>
<button id="btn2">eachを実行</button>

</ul>

<button id="btn2">eachを実行</button>

$('#btn2').click(function(){
  $('#sample2 li').each(function(index){
       $(this).text(index);
  });
});

$('#btn2').click(function(){

$('#sample2 li').each(function(index){

$(this).text(index);

});

今回だと取得したリスト要素は3つなので、0-1-2とカウントしてくれていることが分かりますね！

ではこの時第2引数のvalueには、何が渡されているのでしょうか。
コンソール画面で確認してみましょう。

<ul id="sample3">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>
<button id="btn3">eachを実行</button>

</ul>

<button id="btn3">eachを実行</button>

 $('#btn3').click(function(){
   $('#sample3 li').each(function(index,value){
     console.log(value);
   });
});

$('#btn3').click(function(){

$('#sample3 li').each(function(index,value){

console.log(value);

});

valueには、取得した要素のそれぞれの情報が渡されていることが分かりましたね。

[memo title=”eachメソッドとthis”]eachメソッドではthisを使用することができます。これはeachメソッド内部で、関数が.callされているからなのですが、今回詳しくは省きます。大切なのは、this＝valueとなるので、thisを使用すればvalueを省略できます[/memo]

メモの通り、

 $('#btn3').click(function(){
   $('#sample3 li').each(function(index,value){
     console.log(this);
   });
});

$('#btn3').click(function(){

$('#sample3 li').each(function(index,value){

console.log(this);

});

でも同じ結果になります。

$.each()の場合

$.each()でeachメソッドを実行することもできます。
コンソール画面で確認してみてください

<ul id="sample4">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>
<button id="btn4">eachを実行</button>

</ul>

<button id="btn4">eachを実行</button>

 $('#btn4').click(function(){
   $.each($('#sample4 li'),function(index){
      console.log(index);
      console.log(this);
   });
});

$('#btn4').click(function(){

$.each($('#sample4 li'),function(index){

console.log(index);

console.log(this);

});

コンソール画面に出力されたと思います

配列を使用するeachを実行する場合

配列でもeachを実行することができます。

<ul id="sample5">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>
<button id="btn5">eachを実行</button>

</ul>

<button id="btn5">eachを実行</button>

var array = ["apple","orange","banana"]
$('#btn5').click(function(){
   $(array).each(function(index){
      console.log(this);
      console.log(index);
   });     
});

var array = ["apple","orange","banana"]

$('#btn5').click(function(){

$(array).each(function(index){

console.log(this);

console.log(index);

});

もちろん

$.each(array,function(index){
   console.log(this);
   console.log(index);
});

$.each(array,function(index){

console.log(this);

console.log(index);

});

でもokです！

配列を使ったeachの応用

応用でcssを操作してみましょう。

<ul id="sample7">
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>
<button id="btn7">eachを実行</button>

</ul>

<button id="btn7">eachを実行</button>

var array = ["red","blue","green"];
$('#btn7').click(function(){
  $.each(array,function(index){
    $('#sample7 li').eq(index).css('color',this);
  });
});