0
<div class="file" id="fileList">
    <div th:each="file : ${list}" class="file-list">
        <img src="/images/example.png">
        <div class="text">
            <p th:text="P1"></p>
            <p th:text="P2"></p>
            <p th:text="P3"></p>
            <p th:text="P4"></p>
            <p th:text="'Status:' + ${file.status}" id="pTag"></p>
        </div>
   </div>
</div>

上記のようなHTMLがあります。fileの中にPタグが5つあり、それを1セットとして、そのセットをコレクション(list)の数だけ描画しています。
この時、5つ目のPタグの値を同じページ内の別のタグ内で使いたいのです。その時にJSで

var tmp = document.getElementById("pTag");

とすれば ${file.status} の値を取ってはこれるのですが、コレクションの最初の1つだけしか取れないのです。
th:each="file : ${list}" としているので、listの数が2つ以上ある時はその数だけpTagも取得したいのです。

ちなみに

var listObj = document.getElementById("fileList");
console.log(listObj);

とすればログを開いた時にlistObjの中にちゃんと個数分の ${file.status} を見ることができています。
ですが、listObjはiterableなオブジェクトではないらしくループ処理をかけて取得するというようなことはできませんでした。

何か良い方法ご存知ないですか?

1 件の回答 1

0

ひとつ確認しますが、ページ内に <div class="file-list">...</div> のかたまりがコレクションの数だけ繰り返されるという理解でよいですよね? それとも、上記のHTMLの構造を全く変えずに<p> の5個セットだけが複製されるという意図でしょうか。ここでは前者だと仮定してお答えします。

ID はページ内で重複してはいけないので、 getElementById() では1つしか要素を得ることができないのです。以下にいくつか考えられる方針を挙げます。

(A) 5つ目の p 要素に同じクラス名を割り当てて、 document.getElementsByClassName() でクラスが指定されたすべての要素を得る。この関数で返ってくるのは iterable ではない HTMLCollection 型のDOMオブジェクトです。ループのしかたは下の補足に書いてあります。

(B) 指定したCSSセレクターにマッチした全ての要素を返す document.querySelectorAll() を使って、(やや技巧的ですが) document.querySelectorAll("div.text > p:nth-child(5)") のようにする。こちらで返ってくるのは NodeList 型のDOMオブジェクトで、こちらは HTMLCollection と違って iterable なので for...of ループを使うことができます。

(C) DOMツリーを自力でたどる。 document.getElementById("fileList").childrenHTMLCollection 型のDOMオブジェクトです。これを下に示すやりかたでループします。

私のおすすめとしては「5個セット」というルールが将来変わっても壊れないように、(A) でクラス名を指定するやり方が優れていると思います。


(補足) HTMLCollection のループのしかた

HTMLCollection は実体としては要素のリストなのですが iterable ではないので、 for...of ループで列挙することができません。.length プロパティとインデックスアクセス [i] は使えるので、インデックスで列挙することもできますが、インデックスを経由したくなければ以下のように Array に変換してループするのが簡単です。

let fileList = document.getElementById("fileList");
// fileList.children は HTMLCollection
for (let child of Array.from(fileList.children)) {
    // child は div#fileList の子要素
}
1
  • 参考になりました。ありがとうございます! 😁
    – shinchan97
    2020年6月23日 15:54

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。