どのように要素が増えた場合も要素数を取得して同じクラス名の要素すべてに実行するようにするのでしょうか？

Question

https://teratail.com/questions/115163の続き

var item0 = document.querySelectorAll('.js-slide0')[0];
var item1 = document.querySelectorAll('.js-slide1')[0];
var item2 = document.querySelectorAll('.js-slide2')[0];
var item3 = document.querySelectorAll('.js-slide3')[0];
var item4 = document.querySelectorAll('.js-slide4')[0];

var item0 = document.querySelectorAll('.js-slide0')[1];
var item1 = document.querySelectorAll('.js-slide1')[1];
var item2 = document.querySelectorAll('.js-slide2')[1];
var item3 = document.querySelectorAll('.js-slide3')[1];
var item4 = document.querySelectorAll('.js-slide4')[1];

var arrayitemNum = item0.length;

var adNum = 0;
while(adNum < arrayitemNum) {
var arrayItem = [];
arrayItem[adNum] = document.querySelectorAll('.js-slide' + adNum)[1];

adNum++;
}

このように途中までやったのですが、これ以上わかりません。
どのように要素が増えた場合も要素数を取得して同じクラス名の要素すべてに実行するようにするのでしょうか？

それとも現場ではここまでかっこいい書き方はしないで、要素が増えるごとに手動で足していく方が管理しやすいので主流でしょうか？
もう少し具体的に教えていただけませんでしょうか？

Comments

[m.ts10806]

その「前の質問」で解決できるように思うのですが。まだ解決していない内容を再掲するのは非推奨です。

Answer 1

こういう書き方したりします。

let items = document.querySelectorAll(".js-slide");
for(let i = 0; i < items.length; i++) {
    items[i].className += "" + i;
}

Comments

[退会済みユーザー]

ありがとうございます。

items[i].className += "" + i;
これは足してからitems[i]要素のクラス名にiを足してからこの要素に代入するという事ですね。
これをwrap始めてみたのですが、クラスの名前に変数の中の数値を足すという事が出来るのですね。

Answer 2

let items = document.querySelectorAll(".js-slide");
Object.keys(items).forEach((i) => {
  items[i].className += "" + i;
});

の方がかっこいいでしょうか？