脱jQuery $.each() $(要素).each()

反復処理を施すためのメソッドのネイティブ紹介です。2種類ありますが根本的なものは変わりません。

詳しくは 脱jQuery その1 をご覧ください。

without-jquery

$.each は主に配列に対して使うことが多いと思います。$(要素).eachに関しては jQuery オブジェクトに対して反復処理の命令です。

$.each

jQuery

var arr = ["赤", "青", "黄", "黒", "白"];
$.each(arr, function() {
    alert(this);
});

書き換え JavaScript

var arr = ["赤", "青", "黄", "黒", "白"];
for (var i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

配列を前から順番にアラートする簡単なコードです。

jQuery の場合「this」は反復中のその順番の配列要素を指します。つまり i 番目であれば　arr[i] となるので、ネイティブの方ではそのまま arr[i] と書けばOKです。簡単に書くと this = arr[i] です。どちらの命令も順番に「赤」「青」「黄」「黒」「白」とアラートします。

for の使い方の基本は下記をご参照ください。

参考：for について

$(要素).each()

jQuery

$(".class").each(function(i) {
    $(this).css("height", i + "px")
});

書き換え JavaScript

var myClass = document.getElementsByClassName("class");
for (var i = 0; i < myClass.length; i++) {
    myClass[i].style.height = i + "px";
}

$(要素)の方は jQuery オブジェクト、要素に対してインデックス番号ごとに違う処理を行いたい時に使う命令です。

今回は .class を持つ要素全てに対し、1番目の高さ1px、2番目の高さ2px、・・・i 番目の高さ i px、という処理をしてみます。

jQuery の方は function(i) とすることによって i をインデックス番号にすることが出来ます。$(this) は ネイティブの方では myclass[i] つまり .class の i 番目ということになります。これも for 、i 番目ということの応用です。

まとめ

jQuery JavaScript
$.each(A, function() {
  alert(this);
})		 for (var i = 0; i < A.length; i++) {
  alert(A[i]);
}
A.each(function(i) {
  $(this).css("font-size", i + "px");
})		 for (i = 0; i < A.length; i++) {
  A[i].style.fontSize = i + "px";
}