【JavaScript/jQuery】特定のクラス要素の数だけ繰り返し、テキストを差し替える（for()、forEach()、each()）

あるクラス名を持った要素にだけ変更を加えたい場合、for()を使って対応することができます。

また、JavaScriptの場合、少し処理を加えるとforeach()でも同様の処理をすることができます！

jQueryの場合はeach()を使っても同様の処理をすることができます！

今回は備忘録としてJavaScriptとjQueryのfor文とforeach文、each文の書き方の違いをまとめました！

for()で実行する場合

HTML

<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

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

$(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

<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

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

$(function(){
  var ele = $(".even");
  ele.each( (index, element) => {
    const new_text = index + "番目：" + $(element).text();
    $(element).text(new_text);
  });
});
/*
 * 実行結果
 *
奇数テキスト
0番目：偶数テキスト
奇数テキスト
1番目：偶数テキスト
奇数テキスト
2番目：偶数テキスト
*/