class名からID属性を取得して、同じ処理を複数の要素に一括で実行する方法

JavaScriptを使用して、任意のクラス名を持つ要素を取得し、それぞれの要素のID属性を取得して処理対象にする方法をご紹介します。

 

let lstTriggerAD1999s = document.querySelectorAll(".js-triggerAD1999");
let triggerAD1999s = Array.prototype.slice.call(lstTriggerAD1999s); //Array.NodeList

//トリガーからIDを取り出して、ループ処理
let lngtAD1999 = triggerAD1999s.length;
for (var n = 0; n < lngtAD1999; n++) {
  //IDを処理対象にする
  var targetAD1999 = triggerAD1999s[n].getAttribute('id');
  var targetAD1999 = document.getElementById(targetAD1999);
  //action
  //（ここに処理させる内容）
  targetAD1999.classList.add('Lavos');
  
}; //for{}

以下が各行の解説です。

 

1行目：変数「lstTriggerAD1999s」に、クラス名「.js-triggerAD1999」を持つ全ての要素を取得して代入しています。

2行目：NodeListを配列に変換して、変数「triggerAD1999s」に代入しています。この配列をループ処理することで、各要素のID属性を取得して処理対象にすることができます。

5行目から11行目：forループを使用して、配列内の各要素のID属性を取得して処理対象にしています。

6行目：変数「targetAD1999」に、forループで取得した要素のID属性を代入しています。

7行目：変数「targetAD1999」に、取得したID属性を持つ要素を代入しています。つまり、要素自体が変数「targetAD1999」に格納されます。

10行目：変数「targetAD1999」に対して、classList.addメソッドを使用して「Lavos」というクラスを追加しています。この処理により、対象の要素に「Lavos」というスタイルを適用できます。