JavaScript | HTML要素にidを連番振りする方法

2021-07-19JavaScript CSSセレクタ,JavaScript

JavaScriptでリストで取得しているHTML要素にidを連番振りする方法を紹介しています。

HTML要素にidを連番振りする

HTML要素にidを連番振りするJavaScriptのサンプルコードになります。

例えば以下のリストタグのHTML要素に連番付けしたidを付与する場合の方法です。

<ul id="target">
  <li>ItTEM 01</li>
  <li>ItTEM 02</li>
  <li>ItTEM 03</li>
</ul>

サンプルではquerySelectorAll()を使って要素を取得しています。

配列のループ処理はfor ofを利用、連番用にキーも欲しいのでentries()メソッドを使ってキー（i）と要素（e）を取得できるようにする。

idプロパティにて連番を加えて作成したid名を付与しています。

let elements = document.querySelectorAll('#target li');

for (const [i, e] of elements.entries()) {
	e.id = `id-${i}`;
}

console.log(elements);
// li#id-0 li#id-1 li#id-2