idとかに連番を自動的に振る

idやらを自動的に振る記述を複数回書いたので、同じことを書くのが面倒で関数化しました。

例えば以下のように連番を振りたい要素があった場合、増えるたびに付け加えたり途中の要素を削除したらidを振り直すのがめちゃくちゃめんどい。

index.html

<div id="id_01" class="js-hoge">
  <!-- 何か -->
</div>
<div id="id_02" class="js-hoge">
  <!-- 何か -->
</div>
...
<div id="id_10" class="js-hoge">
  <!-- 何か -->
</div>

これに対して以下のように書けば連番にできます

main.js

'use strict'
import { getTwoDigitsNumber } from '../scripts/getTwoDigitsNumber';
const { log } = console;

const hoges = document.querySelectorAll(".js-hoge");
hoges.forEach((hoge, i) => {
  const num = i + 1;
  hoge.setAttribute("id", `id_${getTwoDigitsNumber(num)}`);
});

getTwoDigitsNumber()については以下を参照ください
https://zenn.dev/icchicw/articles/901ea64f6d16f1

ただ毎回コピペして中身変えないといけないのは面倒なので、関数化しました

assignConsecutiveNumber.js

'use strict'
import { getTwoDigitsNumber } from './getTwoDigitsNumber';
const { log } = console;

export function assignConsecutiveNumber(elms, attribute, prefix) {
  if(!elms | !attribute | !prefix) return;
  if (typeof elms == "string") elms = document.querySelectorAll(elms);
  elms.forEach((elm, i) => {
    const num = i + 1;
    elm.setAttribute(attribute, `${prefix}_${getTwoDigitsNumber(num)}`);
  });
}

main.js

'use strict'
import { assignConsecutiveNumber } from '../scripts/assignConsecutiveNumber';
const { log } = console;

//elms: string
assignConsecutiveNumber(".js-hoge", "id", "id");

//elms: NodeList
const hoges = document.querySelectorAll(".js-hoge");
assignConsecutiveNumber(hoges, "id", "id");

elmsにはstring, NodeListどちらでもOKです
attributeには属性、prefixには接頭辞を入れてください
引数すべて満たさないとreturnします