質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

374閲覧

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

kiti913

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/01/23 08:10

前提

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

実現したいこと

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

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

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

該当のソースコード

PHP

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

JavaScript

1window.addEventListener("DOMContentLoaded", function () { 2 const noteNumber = document.querySelector(".js-num-target"); 3 const numberText = noteNumber.innerHTML; 4 const num = Number(numberText); 5 6 number = ("00" + num).slice(-2); 7 8 document.querySelector(".js-num-target").innerHTML = number; 9});

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

plasticgrammer

2023/01/23 08:29

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

2023/01/23 08:50

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

回答1

1

ベストアンサー

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

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

投稿2023/01/23 09:19

plasticgrammer

総合スコア629

kiti913👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kiti913

2023/01/23 12:47

``` 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; }); }); ``` 上記コードでうまく動きました! ありがとうございました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。