今回は繰り返し処理ができるJQueryのeachメソッドについて解説していきたいと思います。
DOMや配列やオブジェクトを取得できるのでとても短文で便利なので使用できる機会があったら是非使用してみてください！
それではいってみます(^O^)
Menu
eachメソッド
JQueryのeachメソッドはHTML要素（DOM）を操作する時など、繰り返し処理によって作業を短縮化できます。
構文➀
1 2 3 4 | //構文➀ $('セレクター').each( function(index,val){ //処理 }; |
構文➁
1 2 3 4 | //構文➁ $.each('セレクターや配列やオブジェクト', function(index,val){ //処理 }); |
HTML要素（DOM）の取得例
値のみ取得
1 2 3 | $('セレクター').each(function() { 処理 }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="sample"> <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </div> //DOMの値のみ取得する場合 $('.sample li').each(function() { console.log($(this).text()); }); |
【結果】
①インデックスと値取得の例
1 2 3 | $('セレクター').each(function(index) { 処理 }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="sample"> <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </div> //DOMのインデックスと値を取得する場合1 $('.sample li').each(function(index) { console.log(index + ':' + $(this).text()); }); |
【結果】
②インデックスと値取得の例
1 2 3 | $.each($('セレクター'), function(インデックス,エレメント) { 処理 }); |
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="sample"> <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> </div> //DOMのインデックスと値を取得する場合2 $.each($('.sample li'), function(i, e) { console.log(i + ":" + $(e).context.outerHTML); }); |
【結果】
配列取得の例
1 2 3 | $.each(配列, function(インデックス, 値) { 処理 }); |
1 2 3 4 5 6 | //配列の場合 var ary=['aaa','bbb','ccc']; $.each(ary, function(index, val) { console.log(index + ":" + val); }); |
【結果】
オブジェクト取得の例
1 2 3 | $.each(オブジェクト, function(キー, 値) { 処理 }); |
1 2 3 4 5 6 7 8 9 10 | //オブジェクトの場合 var obj={ 'name' : '田中', 'age' : 21, 'addr' : '東京都' }; $.each(obj, function(key, val) { console.log(key + ":" + val); }); |
【結果】
まとめ
eachメソッドは短文で処理できるので非常に便利です！
以上です(⊙ꇴ⊙)
