あるクラス名を持った要素にだけ変更を加えたい場合、for()を使って対応することができます。
また、JavaScriptの場合、少し処理を加えるとforeach()でも同様の処理をすることができます！
jQueryの場合はeach()を使っても同様の処理をすることができます！
今回は備忘録としてJavaScriptとjQueryのfor文とforeach文、each文の書き方の違いをまとめました！
もくじ [＜]
for()で実行する場合
HTML
1 2 3 4 5 6 7 8 | <div> <p class="odd">奇数テキスト</p> <p class="even">偶数テキスト</p> <p class="odd">奇数テキスト</p> <p class="even">偶数テキスト</p> <p class="odd">奇数テキスト</p> <p class="even">偶数テキスト</p></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | window.onload = function() { const ele = document.getElementsByClassName("odd");//class属性が「odd」の要素を取得 for(let i = 0; i < ele.length; i++){//class属性が「odd」の要素の数だけ繰り返し処理 const new_text = i + "番目：" + ele[i].textContent; ele[i].innerHTML = new_text; }}/* * 実行結果 *0番目：奇数テキスト偶数テキスト1番目：奇数テキスト偶数テキスト2番目：奇数テキスト偶数テキスト*/ |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ const ele = $(".odd");//class属性が「odd」の要素を取得 for(let i = 0; i < ele.length; i++){//class属性が「odd」の要素の数だけ繰り返し処理 const new_text = i + "番目：" + ele.eq(i).text(); ele.eq(i).text(new_text); }});/* * 実行結果 *0番目：奇数テキスト偶数テキスト1番目：奇数テキスト偶数テキスト2番目：奇数テキスト偶数テキスト*/ |
forEach()で実行する場合 ※jQuery不可
forEach文で繰り返し処理をする場合、document.getElementsByClassName("クラス名")で取得した要素をArray.from()を使って配列にすることでforEach文でも繰り返し処理を実行することができます！
※ただし、jQueryではforEach()は使えないので、代わりにeach()を使います
HTML
1 2 3 4 5 6 7 8 | <div> <p class="odd">奇数テキスト</p> <p class="even">偶数テキスト</p> <p class="odd">奇数テキスト</p> <p class="even">偶数テキスト</p> <p class="odd">奇数テキスト</p> <p class="even">偶数テキスト</p></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | window.onload = function() { var ele = document.getElementsByClassName("even"); var ele_arr = Array.from(ele);//←配列にする ele_arr.forEach( (element, index) => { const new_text = index + "番目：" + element.textContent; element.innerHTML = new_text ; });}/* * 実行結果 *奇数テキスト0番目：偶数テキスト奇数テキスト1番目：偶数テキスト奇数テキスト2番目：偶数テキスト*/ |
each()で実行する場合 ※jQueryのみ可
for文やforeach文と同様に繰り返し処理をすることができます！
※ただし、JavaScriptではeach()は使えないので、代わりにforEach()を使います
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function(){ var ele = $(".even"); ele.each( (index, element) => { const new_text = index + "番目：" + $(element).text(); $(element).text(new_text); });});/* * 実行結果 *奇数テキスト0番目：偶数テキスト奇数テキスト1番目：偶数テキスト奇数テキスト2番目：偶数テキスト*/ |
