jQueryのeachメソッドとは？基本的なループの使い方や注意点を解説

オブジェクト・配列の操作

「jQuery」のeachメソッドは、オブジェクトや配列に対しても繰り返し処理をおこなえます。

以下は、配列とオブジェクトのサンプルコードです。

  
// 配列の繰り返し処理
const fruits = ["apple", "banana", "melon"];
$.each(fruits, function (index, value) {
    console.log(`配列${index}番目の値は${value}です。`);
});

// オブジェクトの繰り返し処理
const person = {
    name: "Taro",
    age: 18,
    sex: "man",
};
$.each(person, function (index, value) {
    console.log(`${index}:${value}`);
});
  

上記コードでは、配列fruitsの各要素とオブジェクトpersonの各プロパティを繰り返し処理しています。このようにeachメソッドを使用することで、オブジェクトや配列の要素に対しても効率的な操作が可能です。

jQueryのeachメソッドの使い方4つ

ここからは、「jQuery」のeachメソッドの使い方について解説します。

eachメソッドの基本的な使い方は、以下の4つです。

• 配列をループする
• 連想配列をループさせる
• 多次元配列をループさせる
• jQuery.each() を使う方法

配列をループする

「jQuery」のeachメソッドを使用すると、配列の各要素に対して繰り返し処理を実施できるのが強みです。

以下は、配列をループして各要素をコンソールに出力するサンプルコードです。

  
    // ループ対象の配列
    const array = ['book1', 'book2', 'book3', 'book4', 'book5'];
    
    
    $.each(array, function(index, value) {
        console.log(value);
    });
  

上記コードを実行することで、「book1」から「book5」までの各要素が順番にコンソールで表示されます。

連想配列をループさせる

連想配列（オブジェクト）は、eachメソッドでループ処理が可能です。

  
    // ループ対象の連想配列
    const  obj = {
        name: 'book1',
        price: 10000,
        theme: 'Programming'
    };
    
    $.each(obj, function(index, value) {
        console.log(index + ': ' + value);
    });
  

上記のコードを実行することで、「name: book1」「price: 10000」「theme: Programming」という形式で各要素がコンソールで表示されます。

多次元配列をループさせる

多次元配列は、eachメソッドを使用してループ処理ができます。多次元配列とは、配列の中にさらに配列が含まれる構造のことです。

以下は、多次元配列の各要素をコンソールに出力するサンプルコードです。

  
    // ループ対象の多次元配列
    const matrix = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9]
    ];
    
    $.each(matrix, function(rowIndex, row) {
        $.each(row, function(colIndex, value) {
            console.log(`行${rowIndex + 1}、列${colIndex + 1}の値は${value}です。`);
        });
    });
  

このコードを実行すると、コンソールには各行と列の位置とその位置に対応する値が表示されます。

jQuery.each() を使う方法

「jjQuery」オブジェクトのeachメソッドは、Webページ上に複数存在する同じ条件のオブジェクトに対してループ処理をおこなう場合に適しています。

以下は、「HTML」のリスト要素をループして各要素をコンソールに出力するサンプルコードです。

  
    $('li').each(function(index, element) {
      console.log($(element).text());
  });
  

このコードを実行すると、リストの各要素がコンソールに表示されます。

jQueryのeachメソッドのループをスキップ・終了させる方法

ここでは、「jjQuery」のeachメソッドのループをスキップ・終了させる方法について解説します。ループをスキップ・終了させる方法は、以下の2つです。

• ループ処理のスキップ方法
• ループ処理の終了方法

ループ処理は、スキップしたり終了したりする処理を加えないと無限ループに陥ります。そのため、eachメソッドのような繰り返し処理において、ループのスキップや終了をひとつの処理として明記しなくてはなりません。

具体的には、「jQuery」のeachメソッドを使用するときにループ処理をスキップしたり終了したりするタイミングで「return false」や「return true」を記述します。

ループ処理のスキップ方法

繰り返し処理の中で、特定の条件を満たす要素だけをスキップして次の要素に処理を移したい場合もあります。その場合ループを終了させるのではなく、特定の要素の処理だけをスキップするために「return true」と記述しましょう。

例として、家賃の相場が10万円から26万円の間のデータだけを太字にする処理を考えます。10万円未満または26万円を超えているのデータに対しては、処理をスキップするために「return　true」を使用します。

  
    $('p span').each(function(){
      if($(this).text() < 100000 || $(this).text() > 260000) return true;
      var html = $(this).html().replace(/(\d+)/g,"$1");
      $(this).html(html);
     });
  

このコードでは、家賃の価格が10万円未満または26万円を超えている場合、その要素に対する処理をスキップして次の要素に処理を移します。

ループ処理の終了方法

「jQuery」のeachメソッドでは、ある条件が満たされたときにループを中断したい場合があります。その際、「jQuery」のeachメソッドではbreak文は使用できません。

代わりに、ループを中断させるためには中断したい箇所に「return　false」と記述します。たとえば、ある地域の物件の家賃の推移を示す「HTML」文があり、家賃が10万円以下の要素を太字にする処理を考えます。

この場合、家賃が10万円を超えた時点で処理を中断するために「return false」を使用しましょう。

  
    $('p span').each(function(){
      if($(this).text() > 100000) return false;
      var html = $(this).html().replace(/(\d+)/g,"$1");
      $(this).html(html);
     });
  

このコードでは、家賃の価格が10万円を超えると、それ以降の要素に対する処理が中断されます。

jQueryのセレクタを指定しないeachメソッドの利用場面とは

「jQuery」のeach()関数には、通常のDOM要素に対する$(セレクタ).each()の形式だけでなく$.each()という形式もあります。この$.each()は、セレクタを指定せずに配列やオブジェクトに対して繰り返し処理をおこなうためのものです。

この形式は、「JavaScript」の配列やオブジェクトを効率的に処理する際に役立ちます。

const fruits = [“apple”, “banana”, “cherry”];

この配列の各要素をコンソールに出力する場合、$.each()を使用して以下のように記述できます。

$.each(fruits, function(index, value) {
console.log(`Index ${index} has value ${value}`);
});

上記のコードを実行したとき、「Index 0 has value apple」、「Index 1 has value banana」、「Index 2 has value cherry」という出力が可能です。

また、オブジェクトに対しても同様の処理をおこなえます。

  
    const person = {
      name: "John",
      age: 30,
      city: "New York"
  };  
  

このオブジェクトの各プロパティをコンソールに出力する場合は、以下のように記述できます。

  
    $.each(person, function(key, value) {
      console.log(`Key ${key} has value ${value}`);
  });
  

上記のコードを実行したとき「Key name has value John」、「Key age has value 30」、「Key city has value New York」という出力が可能です。

このように、$.each()は、DOM要素に対する処理だけでなく、「JavaScript」の配列やオブジェクトに対する繰り返し処理をおこなう際にも役立つ関数です。

jQueryのeachメソッドが動かない理由とは？

ここからは、「jQuery」のeachメソッドが動かない理由と対処法について解説します。「jQuery」が動かない原因はさまざまですが、主な原因として以下の点があげられます。

• ファイルが読み込めていない、またはパスが間違っている
• FTPツールのファイル更新条件が間違っている
• セレクタが間違っている

セレクタが間違っている例としては、<div class="accordion"></div>という要素に対して、$(“accordion”).on(“click”, function() {…});というようにセレクタを指定した場合です。この場合、正しくは$(“.accordion”).on(“click”, function() {…});とする必要があります。

また、セレクタの指定方法に注意が必要なケースも考えられるでしょう。たとえば、以下のような「HTML」があるとします。

  
    <nav>
      <ul class="menu">
        <li><a class="menu-btn"></a></li>
      </ul>
     </nav>
  

この場合、$(“nav > .menu > .menu-btn”).on(“click”, function() {…});というセレクタは動作しません。正しくは、$(“ul.menu .menu-btn”).on(“click”, function() {…});とする必要があります。

このように、セレクタの指定方法には注意が必要です。

jQueryのeachメソッドの使い方を知ってループ処理を使いこなそう

「jQuery」のeachメソッドについて解説しました。本記事を読むことで、「jQuery」の基本から動かない場合の対処法までを確認できます。

eachメソッドは、「jQuery」において基本的なメソッドであり、必ず使う知識なので、本記事を参考にぜひマスターしてください。