コアポイント
jquery.each（）？とは何ですか
jQueryの各（）関数は、ターゲットjQueryオブジェクトの各要素をループするために使用されます。これは、1つ以上のDOM要素を含むオブジェクトであり、すべてのjQuery関数を公開します。マルチエレメントDOM操作や、任意の配列とオブジェクトのプロパティを反復するのに非常に役立ちます。この関数に加えて、jQueryは、以前の選択またはDOM要素を作成せずに呼び出すことができる同じ名前のヘルパー関数も提供します。
jquery.each（）syntaxさまざまなモードの実際のアプリケーションを見てみましょう。
次の例では、Webページで各
要素を選択し、各要素のインデックスとIDを出力します。
<div>可能な出力結果は次のとおりです
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// DOM 元素
$('div').each(function(index, value) {
console.log(`div${index}: ${this.id}`);
});</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>このバージョンは、実用的な関数ではなくjQueryの<p>関数を使用します。 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>div0:header
div1:main
div2:footer</code></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>次の例は、実用的な機能の使用を示しています。この場合、ループするオブジェクトは最初のパラメーターとして与えられます。この例では、配列をループする方法を示します。
<p>
<code>$(selector).each()最後の例では、オブジェクトのプロパティを反復する方法を示したいと思います。
これは、適切なコールバック関数を提供することに要約されます。コールバック関数のコンテキスト
は、その2番目のパラメーターである現在の値に等しくなります。ただし、コンテキストは常にオブジェクトであるため、元の値をラップする必要があります。
// 数组
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最初のパラメーターは現在のインデックスです。これは、数字（配列用）または文字列（オブジェクト用）です。 this
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }基本的なjquery.each（）関数例
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
// true
// falsejQuery.each（）関数がjQueryオブジェクトと組み合わせてどのように使用されるかを見てみましょう。最初の例では、ページ内のすべての
ページに次のリンクがあるとします：a
href
$('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（）に渡されるコールバック関数の「ネイティブ」形式であることに注意する必要があります。その理由は、JQueryが実際にはDOM要素の配列の単なるラッパーであるためです。 jquery.each（）を使用することにより、この配列は通常の配列と同じ方法で反復します。したがって、パッケージの要素を箱から出しません。
2番目の例については、を書くことで要素のthis.href属性を取得できることを意味します。 jqueryのhrefメソッドを使用する場合は、このような要素を再パッケージ化する必要があります。 attr()
$(this).attr('href')
このコードスニペット出力：
<code>div0:header div1:main div2:footer</code>
ここには特別なものはありません。アレイには数値インデックスがあるため、0から
// 数组
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$.each(arr, function(index, value) {
console.log(value);
// 将在 "three" 后停止运行
return (value !== 'three');
});
// 输出：one two threeから始まる数字が表示されます。ここで、nは配列内の要素の数です。
この例出力：
// 对象
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（）にネストされた呼び出しを使用して、ネストされた構造を処理します。外部呼び出しは、さまざまな色の配列を処理します。この例では、オブジェクトごとにキーは1つだけですが、通常、このコードを使用して任意の数のキーを処理できます。
$.each({ one: 1, two: 2 } , function(key, value) {
console.log(this);
});
// Number { 1 }
// Number { 2 }
$.each({ one: 1 } , function(key, value) {
console.log(this == value);
console.log(this === value);
});
// true
// falseインデックスと値を含める必要はありません。これらは、現在繰り返している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="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>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7 https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846 https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>
const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
console.log(`${index}: ${value}`);
});<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（）関数のいくつかの一般的なユースケースは何ですか？一般的なユースケースには、プロパティ、値、またはスタイルを操作するための要素のリストを反復し、コレクション内の各要素でカスタムアクションを実行することが含まれます。
以上が5 jQuery.each（）関数の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
