デモページはこちら

jQueryのeachメソッドの使い方です。eachメソッドには関数を指定します。関数の引数として「index（インデックス番号）」と「element（html要素）」を指定できます。引数は省略可能です。

以下のhtmlの構造でテストします。

<ul>
	<li>HTML・CSS</li>
	<li>Sass</li>
	<li>JavaScript</li>
	<li>jQuery</li>
</ul>

対象のhtml要素のindex番号とテキストをconsole.logで出力します。通常よく使用される記述ではelementの引数を省略し、対象のhtml要素を$(this)で指定します。

$(function() {
	$("ul li").each(function(index) {
		console.log(index + ':' + $(this).text());
	});
});

elementの引数を利用した記述は下記になります。対象のhtml要素は$(element)と記述してjQueryのセレクタにします。

$(function() {
	$("ul li").each(function(index, element) {
		console.log(index + ':' + $(element).text());
	});
});

elementをjQueryのセレクタにせず、JavaScriptのtextContentプロパティを利用して記述することもできます。

$(function() {
	$("ul li").each(function(index, element) {
		console.log(index + ':' + element.textContent);
	});
});

console.logの出力結果は以下の通りで全て同じです。

0:HTML・CSS
1:Sass
2:JavaScript
3:jQuery

次に、対象のhtml要素のテキストをpushメソッドを利用して配列に格納し、配列の値をeachメソッドを利用してconsole.logで出力します。eachメソッドで配列を指定する場合、html要素をセレクタにする場合とは異なり、第1引数に配列・第2引数に関数を記述します。そして関数の引数は「index（インデックス番号）」と「value（配列の値）」を指定できます。配列の値は、配列名[index番号]の形式でも取得できます。

var array = [];
$("ul li").each(function() {
	array.push($(this).text());
});
$.each(array, function(index, value) {
	console.log(index + ':' + value);
});
$.each(array, function(index) {
	console.log(index + ':' + array[index]);
});

こちらもconsole.logの出力結果は以下の通りで全て同じです。

0:HTML・CSS
1:Sass
2:JavaScript
3:jQuery