jQueryにおけるeachメソッドの使用法

jQueryを使用して取得した要素のグループがある場合、それらに加えられる変更はすべての要素に対して同時に行うことしかできません。

例えば、見つかったすべての段落のテキストを変更したい場合、それぞれ異なるテキストにすることはできません。

このような場合、jQueryセット内のすべての要素に関数を適用できる特別なメソッドであるeachが役立ちます。この関数内で要素を区別し、それぞれに対して異なる処理を行うことができます。

本質的にeachは、見つかったすべての要素を反復処理するためのループです。現在ループが処理している要素への参照はthisに格納されます。

以前行っていたように、例えばthis.innerHTMLとして、純粋なJavaScriptでこのthisを単純に使用して要素の内部コンテンツを出力することもできます。しかし、$(this)のようにthisをjQueryのドル記号でラップする方が良いでしょう。そうすることで、すべてのjQueryメソッドやメソッドチェーンを適用できるようになります。

次のHTMLコードを見てみましょう：

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

この例では、クラスwwwを持つすべての要素を取得し、そのコンテンツを画面に表示する必要があります。その方法は次の通りです：$('.www')を使用して必要な要素を取得し、次にeach(test)を使用して、取得した各要素に関数testを適用します。この関数は最初に最初の段落に適用され、次に2番目、3番目というように適用されます。

関数内では、thisは関数testが適用されている要素を指します。最初は最初の要素、次に2番目の要素、というようになります。$(this)という構文を使用することで、通常のJavaScriptのthisの代わりにjQuery要素を取得し、要素のテキストを取得するメソッドhtmlを適用できます。そして、それが単に画面に出力されます：

/*
	関数名testは引用符や()なしで記述します。
	なぜなら、結果ではなくそのコードが必要だからです：
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

このタスクを解決するには、無名関数も使用できます。これが最も一般的な方法です：

$('.www').each(function() {
	alert($(this).html());
});

また、eachメソッドにパラメータ付きのコールバック関数を渡すこともできます。

次の例では、ページ上のすべてのliの末尾にその順序番号を追加してみましょう。ここでは、無名関数に要素のインデックス番号と要素自体を渡します：

$('li').each(function (index, elem) {
	$(elem).append(index);
});

次に、elemの代わりにthisを使用してみましょう：

$('li').each(function (index) {
	$(this).append(index);
});

すべてのliのコンテンツを、その順序番号に変更してください。