jQueryeach（）のしくみ

jQuery each() DOM要素を反復処理するための簡潔な方法です。 Each() メソッドは、ターゲットのjQueryオブジェクトで呼び出されるように設計されています。 jQueryオブジェクトは、1つ以上のDOM要素を含み、jQueryメソッドにアクセスできるオブジェクトです。 each()だけではありません エラーが発生しにくく、複数のDOM要素の操作が簡単になります。

jQuery each() コールバック関数が必要です—後で実行される別の関数に渡される関数。コールバック関数の内部には、要素のインデックス番号と要素自体へのアクセスがあります。コールバック関数のより包括的なレビューはここにあります。

each()のアプリケーション JavaScriptループと同じくらい簡単ですが、混乱を招く可能性のある場所がいくつかあります。これらの点を明確にするとともに、構文についても見ていきます。このガイドの最後に、jQuery each()を適用するさまざまな方法を確認するためのステップバイステップのコード例を示します。 。

jQueryeach（）とは何ですか？

jQueryはそれぞれ、jQueryライブラリのループメソッドです。 DOM要素を反復処理することでJavaScriptループのように機能します。 jQuery each() コールバック関数が必要です。コールバック関数の内部には、DOM要素を操作できます。

コールバック関数の本体内で、条件ステートメントを使用して、選択した要素の一部を変更できます。条件文は、JavaScriptのif…then文です。これにより、要素がどのように正確に変更されるかをより詳細に制御できます。

jQuery each（）構文

jQueryはそれぞれ2つの方法で呼び出すことができます。まず、選択した要素で呼び出されるメソッドとして。コールバック関数は、最大2つのオプションの引数（インデックスと値）を受け入れます。 Indexは、現在の要素のインデックス番号です。現在の要素がリストの最初の場合、インデックス番号は0を返します。

value引数は、現在の要素を参照します。メソッドを値にチェーンするには、jQueryセレクターで値をラップする必要があることに注意してください。構文を分解できるように、これをすべて抽象的なコードに入れましょう。

$('div').each((index, value) => {
  console.log(`${index}: ${$(value).text()}`)
})

ここでは、ページ上の各

$('div').each(function() {
  alert($(this).text())
})

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

$('.colorSelect').each((index, value) => {
  console.log($(value).text())
})

$('.colorSelect').each(function() {
   console.log($(this).text())
})

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

<div class='result'>

</div>

<style>
  .colorSelect {
    color: blue;
  }
  
  .green {
    color: green;
  }
</style>