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

コアポイント

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

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

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

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

jquery.each（）syntax

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

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

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

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

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

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

// 數(shù)組
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

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

// 輸出：one two three

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

// 對象
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

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

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }

基本的なjquery.each（）関數(shù)例

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false

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

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

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

2番目の例は出力：

$('a').each(function(index, value){
  console.log(this.href);
});

// DOM 元素
$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});

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

2番目の例については、

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

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

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

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

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

// 數(shù)組
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

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

// 輸出：one two three

n-1

から始まる數(shù)字が表示されます。ここで、nは配列內(nèi)の要素の數(shù)です。

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

この例出力：

// 對象
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

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

$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }

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

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

$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false

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

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

$('a').each(function(index, value){
  console.log(this.href);
});

コンソールに入ります：

$('a').each(function(index, value){
  const link = this.href;

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

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

<a href="http://www.miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="http://www.miracleart.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="http://www.miracleart.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a>

<code>http://www.miracleart.cn/link/9a4b930f7a36153ca68fdf211c8836a7
http://www.miracleart.cn/link/235fba44e32ba4dd3a3f72db1a8a6846
http://www.miracleart.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>

jquery.each（）遅延例

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

const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});

結(jié)論

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

<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年に更新され、現(xiàn)在のベストプラクティスを反映し、現(xiàn)代のJavaScriptを使用してネイティブソリューションに関する結(jié)論を更新しました。JavaScriptの詳細については、javascript：NoviceからNinja、第2版》）

jQuery jquery red（）function

に関するよくある質(zhì)問

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

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

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

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

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