jQuery.each()の使い方を徹底解説！配列・オブジェクトの要素を簡単処理！
jQueryのeach()メソッドは、配列やオブジェクトの要素を順番に処理するための便利なメソッドです。このメソッドを使うことで、JavaScriptのforループよりもシンプルで直感的なコードを書くことができます。この記事では、jQuery.each()メソッドの使い方を、初心者にも分かりやすく解説します。配列やオブジェクトの要素を順番に処理する方法、indexや要素の値を取得する方法、処理を中断する方法などを、実際のコード例を交えて紹介します。
jQuery.each()メソッドの基本
jQuery.each()メソッドは、以下のような構文で記述します。
$(selector).each(function(index, element){
// 各要素に対する処理
});
それぞれの引数の意味は以下の通りです。
- selector: jQueryオブジェクト。each()メソッドは、このセレクタにマッチする要素それぞれに対して、function()で指定された処理を実行します。
- function(index, element): 各要素に対して実行する処理を定義する関数。この関数には、引数として以下の2つが渡されます。
- index: 処理対象の要素のインデックス番号（0から始まる）
- element: 処理対象の要素 itself (DOM 要素)
配列への適用例
数値の配列の各要素をコンソールに表示する例です。
<script>
$(document).ready(function(){
var numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, number) {
console.log("Index: " + index + ", Number: " + number);
});
});
</script>
オブジェクトへの適用例
キーと値のペアを持つオブジェクトの各要素をコンソールに表示する例です。
<script>
$(document).ready(function(){
var person = {name: "太郎", age: 30, city: "東京"};
$.each(person, function(key, value) {
console.log(key + ": " + value);
});
});
</script>
indexと要素の値を活用した処理
each()メソッドの関数では、引数として渡されるindexやelementを使って、より複雑な処理を行うことができます。
indexを使って要素の順番を取得する例
リストの各要素に順番を示す番号を付与する例です。
<ul id="fruit-list">
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
<script>
$(document).ready(function(){
$("#fruit-list li").each(function(index) {
$(this).prepend((index + 1) + ". ");
});
});
</script>
elementを使って要素の値を取得する例
商品の価格リストから合計金額を計算する例です。
<ul id="price-list">
<li data-price="100">商品A</li>
<li data-price="200">商品B</li>
<li data-price="300">商品C</li>
</ul>
<div id="total-price"></div>
<script>
$(document).ready(function(){
var totalPrice = 0;
$("#price-list li").each(function() {
totalPrice += parseInt($(this).data("price"));
});
$("#total-price").text("合計金額: " + totalPrice + "円");
});
</script>
処理の制御
each()メソッドのループ処理は、return文を使うことで制御することができます。
return falseでループを中断する方法
特定の条件を満たす要素が見つかったらループを抜ける例です。
<script>
$(document).ready(function(){
var numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, number) {
if (number === 3) {
return false; // 3を見つけたらループを抜ける
}
console.log(number);
});
});
</script>
continue; で次の要素へスキップする方法
特定の条件を満たす要素を処理から除外する例です。
<script>
$(document).ready(function(){
var numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, number) {
if (number === 3) {
continue; // 3はスキップ
}
console.log(number);
});
});
</script>
jQuery.each()とJavaScriptのforループの比較
jQuery.each()は、JavaScriptのforループと同様の処理を実現することができます。それぞれのメリット・デメリットを理解して、状況に応じて使い分けることが重要です。
| 項目 | jQuery.each() | forループ |
|---|---|---|
| 処理速度 | 遅い | 速い |
| コードの簡潔さ | シンプルに記述可能 | 複雑になりがち |
| 使い分け | DOM操作を伴う場合や、コードの可読性を重視する場合に有効 | 単純な配列処理や、処理速度を重視する場合に有効 |
jQuery.each()を使った実践的な例
jQuery.each()は、以下のような実践的な場面で活用することができます。
- テーブルの行を順番に処理してスタイルを変更
- フォームの入力値をバリデーション
- JSONデータからHTML要素を動的に生成
これらの例については、それぞれのテーマに特化した記事で詳しく解説します。
まとめ
jQuery.each()メソッドは、配列やオブジェクトの要素を効率的に処理するための強力なツールです。本記事で紹介した内容を参考に、柔軟に使いこなせるよう練習してみましょう！
参考資料
よくある質問
Q1: jQuery.each()とJavaScriptのforEach()の違いは何ですか？
A1: jQuery.each()は、jQueryオブジェクトと配列、オブジェクトの両方に使用できます。一方、JavaScriptのforEach()は配列専用です。また、jQuery.each()はreturn false;でループを中断できますが、forEach()は中断できません。
Q2: each()メソッドの中でthisは何を指しますか？
A2: each()メソッドの中で、thisは現在処理されている要素（DOM要素）を指します。
Q3: each()メソッドを使わずに同様の処理を実装することはできますか？
A3: はい、JavaScriptのforループやfor...in文などを使って実装することができます。ただし、jQuery.each()を使うことで、よりシンプルで直感的なコードを書くことができます。
その他の参考記事:jquery each continue