5 jQuery.each（）関数の例

この記事では、jQuery.each（）関数について説明します。これは、jQueryで最も重要で一般的に使用される関数の1つです。その重要性を探求し、それを使用する方法を学びます。

コアポイント

jQuery.each（）関数は、Multi-Element DOM操作とデータ処理を効率的に実行するために、DOM要素、配列、およびオブジェクトを反復する多機能ツールです。
この関数は、2つの動作モードを提供します。JQueryオブジェクト（DOM要素用）で呼び出される方法として、および配列とオブジェクトの実用的な関数として、各モードはさまざまなタイプのデータ構造に適しています。
実用的な例を使用して、この記事では、jQuery.each（）のパワーと柔軟性を示し、反復を簡素化する上でその重要性を強調し、同様のタスクを実行するための代替JavaScriptメソッドを強調しています。

jquery.each（）？とは何ですか

jQueryの各（）関数は、ターゲットjQueryオブジェクトの各要素をループするために使用されます。これは、1つ以上のDOM要素を含むオブジェクトであり、すべてのjQuery関数を公開します。マルチエレメントDOM操作や、任意の配列とオブジェクトのプロパティを反復するのに非常に役立ちます。

この関数に加えて、jQueryは、以前の選択またはDOM要素を作成せずに呼び出すことができる同じ名前のヘルパー関数も提供します。

jquery.each（）syntax

さまざまなモードの実際のアプリケーションを見てみましょう。

次の例では、Webページで各

要素を選択し、各要素のインデックスとIDを出力します。

<div>可能な出力結果は次のとおりです <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// DOM 元素 $('div').each(function(index, value) { console.log(`div${index}: ${this.id}`); });&lt;/code&gt;</pre>このバージョンは、実用的な関数ではなくjQueryの<p>関数を使用します。 </p> <pre class="brush:php;toolbar:false">&lt;code&gt;div0:header div1:main div2:footer&lt;/code&gt;</pre>次の例は、実用的な機能の使用を示しています。この場合、ループするオブジェクトは最初のパラメーターとして与えられます。この例では、配列をループする方法を示します。 <p> <code>$(selector).each()最後の例では、オブジェクトのプロパティを反復する方法を示したいと思います。

これは、適切なコールバック関数を提供することに要約されます。コールバック関数のコンテキスト

は、その2番目のパラメーターである現在の値に等しくなります。ただし、コンテキストは常にオブジェクトであるため、元の値をラップする必要があります。

<code class="language-javascript">// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three</code>

これは、値とコンテキストの間に厳格な平等がないことを意味します。

<code class="language-javascript">// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5</code>

最初のパラメーターは現在のインデックスです。これは、数字（配列用）または文字列（オブジェクト用）です。 this

<code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }</code>

基本的なjquery.each（）関数例

<code class="language-javascript">$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false</code>

jQuery.each（）関数がjQueryオブジェクトと組み合わせてどのように使用されるかを見てみましょう。最初の例では、ページ内のすべての

要素を選択し、
1. プロパティを出力します。 2番目の例では、Webページに各外部を出力します（HTTP（s）プロトコルのみを仮定して）：

ページに次のリンクがあるとします：a href

2番目の例は出力：

<code class="language-javascript">$('a').each(function(index, value){
  console.log(this.href);
});</code>

<code class="language-javascript">// DOM 元素
$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});</code>

jQueryオブジェクトのdom要素は、jquery.each（）に渡されるコールバック関数の「ネイティブ」形式であることに注意する必要があります。その理由は、JQueryが実際にはDOM要素の配列の単なるラッパーであるためです。 jquery.each（）を使用することにより、この配列は通常の配列と同じ方法で反復します。したがって、パッケージの要素を箱から出しません。

2番目の例については、

を書くことで要素のthis.href属性を取得できることを意味します。 jqueryのhrefメソッドを使用する場合は、このような要素を再パッケージ化する必要があります。 attr() $(this).attr('href')

jquery.each（）array例
通常の配列を扱う方法を見てみましょう：

このコードスニペット出力：

<code>div0:header
div1:main
div2:footer</code>

ここには特別なものはありません。アレイには数値インデックスがあるため、0から

<code class="language-javascript">// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three</code>

n-1

から始まる数字が表示されます。ここで、nは配列内の要素の数です。

jquery.each（）jsonの例
配列の配列、オブジェクトのオブジェクト、配列内のオブジェクト、またはオブジェクトの配列など、より複雑なデータ構造がある場合があります。この場合、jquery.each（）がどのように役立つかを見てみましょう：

この例出力：

<code class="language-javascript">// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5</code>

ネストされたjquery.each（）にネストされた呼び出しを使用して、ネストされた構造を処理します。外部呼び出しは、さまざまな色の配列を処理します。この例では、オブジェクトごとにキーは1つだけですが、通常、このコードを使用して任意の数のキーを処理できます。

<code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }</code>

jquery.each（）クラスの例
4. この例は、割り当てられたクラスの製品descriptionの各要素をループする方法を示しています（以下のHTMLに記載）：

セレクター上の各（）メソッドの代わりに、各ヘルパー関数を使用します。

<code class="language-javascript">$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false</code>

この場合、出力は次のとおりです

インデックスと値を含める必要はありません。これらは、現在繰り返しているDOM要素を決定するのに役立つパラメーターにすぎません。さらに、この場合、より便利な各方法を使用することもできます。このように書くことができます：

<code class="language-javascript">$('a').each(function(index, value){
  console.log(this.href);
});</code>

コンソールに入ります：

<code class="language-javascript">$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});</code>

jQueryのテキスト（）メソッドを使用して要素のテキストコンテンツを取得できるように、新しいjqueryインスタンスでDOM要素を包み込んでいることに注意してください。

<code class="language-html"><a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a></code>

<code>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7
https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846
https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>

jquery.each（）遅延例

5. 次の例では、ユーザーがID 5DEMOで要素をクリックすると、すべてのリストアイテムがすぐにオレンジに設定されます。
インデックス関連の遅延（0、200、400 ... ms）の後、要素をフェードアウトします：

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});</code>

結論

この記事では、jQuery.each（）関数を使用して、DOM要素、配列、およびオブジェクトを反復する方法を示します。これは、開発者が独自のツールキットに組み込む必要がある強力で時間を節約する機能です。

<code>0:1
1:2
2:3
3:4
4:5</code>

jQueryがお好みの選択でない場合は、JavaScriptネイティブObject.keys()およびArray.prototype.forEach()メソッドの使用を検討することをお勧めします。また、クラスアレイオブジェクトまたは辞書オブジェクトのキー価値ペアを繰り返すことができるForeachのようなライブラリもあります。

覚えておいてください：$.each()および$(selector).each()は、2つの異なる方法で定義されている2つの異なる方法です。

（この記事は2020年に更新され、現在のベストプラクティスを反映し、現代のJavaScriptを使用してネイティブソリューションに関する結論を更新しました。JavaScriptの詳細については、javascript：NoviceからNinja、第2版》）

jQuery jquery red（）function

に関するよくある質問

jQueryの.each（）関数の目的は何ですか？ jQueryの.each（）関数は、DOM要素のコレクションを反復し、各要素で特定の操作を実行するために使用されます。

jqueryで.each（）関数を使用する方法は？ jQueryセレクターを使用して一連の要素を選択し、その選択で.each（）を呼び出すことにより、.each（）関数を使用できます。各要素で実行されるアクションを定義するコールバック関数を提供します。

.each（）で使用されるコールバック関数のパラメーターは何ですか？コールバック関数は、インデックス（コレクション内の要素の現在のインデックス）と要素（現在のDOM要素が反復されている）の2つのパラメーターを受け入れます。

インデックスパラメーターを.each（）コールバック関数で使用する方法は？インデックスパラメーターを使用して、コレクション内の現在の要素の位置を追跡できます。これは、条件付き操作またはその他の操作に非常に役立ちます。

.each（）関数のいくつかの一般的なユースケースは何ですか？一般的なユースケースには、プロパティ、値、またはスタイルを操作するための要素のリストを反復し、コレクション内の各要素でカスタムアクションを実行することが含まれます。