の それぞれ（） jQuery のメソッドは、一致した要素ごとに実行される関数を指定します。これは、JQuery で広く使用されているトラバース メソッドの 1 つです。このメソッドを使用すると、jQuery オブジェクトの DOM 要素を反復処理し、一致した要素ごとに関数を実行できます。
の それぞれ（） パラメータを受け入れます 関数(インデックス,要素) これは、選択した要素ごとに実行されるコールバック関数です。この関数にはさらにオプションで、index と element という 2 つのパラメータが必要です。したがって、コールバック関数を each() メソッドに渡す必要があります。
返品も可能です 間違い コールバック関数からループを早期に停止します。
構文
$(selector).each(function(index, element))
パラメータ値
で使用されるパラメータ値は、 それぞれ（） メソッドは次のように定義されます。
関数(インデックス,要素): これは必須のパラメータです。これは、選択された要素ごとに実行されるコールバック関数です。これには、次のように定義される 2 つのパラメーター値があります。
理解するためにいくつかの図を見てみましょう それぞれ（） 方法を明確に。
例1
この例では、 それぞれ（） ボタンをクリックするとメソッドがトリガーされます。この手法を応用しているのが、 それ 要素。したがって、このメソッドはそれぞれを反復処理します。 それ 要素。機能は選択されたそれぞれに対して実行されます それ 対応するテキストを表示します それ アラートボックスを使用する要素。
ここでは、コールバック関数のパラメータ値を使用していません。
jQuery each() method <h2> Welcome to the javaTpoint.com </h2> <ul> <li> First element </li> <li> Second element </li> <li> Third element </li> <li> Fourth element </li> </ul> <p> Click the following button to see the list of <b> li </b> elements. </p> Click me function fun(){ $(document).ready(function(){ $('li').each(function(){ alert($(this).text()) }); }); } 出力
今すぐテストしてください上記のコードを実行すると、出力は次のようになります -
ボタンをクリックすると以下のようなアラートが表示されます。
同様に、4 つのアラート ボックスが表示されます。 それ 要素。
例2
この例では、コールバック関数のパラメータ値を使用しています。 索引 そして 要素 。
マイスペースとは何ですか
を適用しています。 それぞれ（） メソッドオン それ 要素。したがって、メソッドはインデックスから始まる li 要素を反復処理します。 0 。選択したそれぞれに対して実行されます それ 要素を選択し、対応する要素の背景色を変更します。
関数が返されると反復は停止します 間違い 。ここに6つあります それ 要素に到達すると関数は停止します。 id = 'i4' 。 4番目の要素ですが、インデックスは次から始まります 0 、したがって、要素の位置は次のようになります。 3 。
jQuery each() method body{ text-align: center; } ul{ list-style-type: none; float: left; } li { width: 40px; height: 40px; margin: 5px; padding: 5px; font-size: 20px; float: left; border: 2px solid blue; } button{ font-size: 20px; } <h2> Welcome to the javaTpoint.com </h2> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li id="i4"> Stop </li> <li> 5 </li> <li> 6 </li> </ul> Click me function fun() { $(document).ready(function(){ $('li').each(function(index, element) { $(element).css('background', 'lightgreen'); if ($(this).is('#i4')) { $('p').text('Index begins with 0. So, the function stopped at position: ' + index ).css('fontSize', '20px'); return false; } }); }); } 出力
今すぐテストしてください上記のコードを実行し、指定されたボタンをクリックすると、出力は次のようになります -
