全てのコンテンツに入っている番号を取得してゼロパディングする方法について

Question

前提

WordPressでアーカイブページを作成しており、コンテンツはカード型で配置して実装を進めてます。
アーカイブページのカードは昇順で並べており、それぞれにナンバーを振るようにしてます。
投稿順に1、2、3と割り振られるように設定。（PHPで処理）

実現したいこと

• PHPで処理した番号をJavaScriptで番号を書き換えたい（数値が「1」なら「01」という風にゼロパディングをしたい）

発生している問題・エラーメッセージ

query Selectorで取得して実行してみると1番先頭の要素のみゼロパディングができたが、2番目以降の番号が変更されない。
query Selector Allで全ての番号を取得して書き換える方法を調べてみたがうまくできず詰まっています。

該当のソースコード

<p class="p-archive__text--num">
[ No.<span class="js-num-target">
<?php
  $paged = get_query_var('paged');
  $perPage = get_query_var('posts_per_page');
  $paged === 0 ? $paged = 1 : $paged = get_query_var('paged');
  $count = $wp_query->current_post + 1;
  echo ($paged - 1) * $perPage + $count;?>
  </span> ]
</p>

window.addEventListener("DOMContentLoaded", function () {
  const noteNumber = document.querySelector(".js-num-target");
  const numberText = noteNumber.innerHTML;
  const num = Number(numberText);

  number = ("00" + num).slice(-2);

  document.querySelector(".js-num-target").innerHTML = number;
});

querySelectorAllを使ったやり方が理解できていない部分があります。
熟練者の方、お手数お掛けしますがご教授をお願いいたします。

Comments

[plasticgrammer]

querySelectorAllで取得したNodeListに対して、forEachで処理すればよさそうですが、forEachの構文は知ってますか（わかりますか）？

[kiti913]

forEachの構文は少しわかる程度のレベルです。
何か参考になる記事等あればこちらにてシェアしていただければ幸いです🙇‍♂️

Answer 1

querySelectorAllで取得したNodeListに対してforEachで処理するのがよさそうです。
参考）https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach

forEachに適用するfunctionの第一引数がその要素(Node)となるので、
それに対してはquerySelectorで取得したときと同じ処理（１要素＝Nodeに対する処理）を行えば、実現できるかと思います。

Comments

[kiti913]

```
window.addEventListener("DOMContentLoaded", function () {
const noteNumbers = document.querySelectorAll(".js-num-target");

noteNumbers.forEach((noteNumber) => {
const numberText = noteNumber.innerHTML;
const num = Number(numberText);
number = ("00" + num).slice(-2);
noteNumber.innerHTML = number;
});
});
```

上記コードでうまく動きました！
ありがとうございました！！！