JavaScriptで複数要素の値をそれぞれ取得して配列で扱う
あまり使う機会はないかもしれませんが、javascriptを使って画面側で要素の値を取って、配列に入れて操作するようなケースになります。クライアントワークでの仕様でコーディングしたこともあり、メモとして残しておきたいと思います。
用途としてはいろんなパターンで応用できますが、ここでは複数のimg要素の各種属性値を取得してそれぞれ個別に出力するという形でサンプルをあげています。以下、実際のソースコードになります。
【HTML】※一部省略
<ul id="target_list"> <li><img src="./img/sample_01.jpg" alt="Image 1" data-name="○○○○○○○○○" data-price="¥500"> </li> <li><img src="./img/sample_02.jpg" alt="Image 2" data-name="○○○○○○○○○" data-price="¥400"> </li> <li><img src="./img/sample_03.jpg" alt="Image 3" data-name="○○○○○○○○○" data-price="¥100"> </li> <li><img src="./img/sample_04.jpg" alt="Image 4" data-name="○○○○○○○○○" data-price="¥200"> </li> </ul> <ul id="output_list"> </ul>【javascript】
const outputElem = document.getElementById('output_list'); const targetElem = document.querySelectorAll('#target_list li img'); const targetCount = targetElem.length; let textArray = []; let priceArray = []; for (let i = 0; i < targetCount; i++) { textArray.push(targetElem[i].getAttribute('data-name')); priceArray.push(targetElem[i].getAttribute('data-price')); let num = i + 1; const html = '<li>' + num + '枚目の画像の「' + textArray[i] + '」は価格が「' + priceArray[i] + '」です</li>'; outputElem.innerHTML += html; }HTMLでは今回対象となるimg要素にそれぞれ属性と値を設定しておきます。つぎにJavaScriptで要素を取得して値を操作していきます。まずは、出力先の要素と対象となるimg要素を取得します。そしてimg要素の数量も合わせて取得しておきます。そして、属性ごとに空の配列を用意します。 続いてfor文で要素の数量分だけループさせていきます、この時にそれぞれの属性値を配列に入れていきます。属性値を配列に入れたのち、配列の中身をそれぞれ取り出し出力側の要素を表示させていきます。数をカウントさせる場合、インデックスは0から始まるので注意が必要です。そして、値が入ったHTMLを挿入していきます。 これで、複数要素のそれぞれの属性値を個別に出力することができました。今回のサンプルはこちらにあげています。
See the Pen rQmyOZ by designsupply (@designsupply) on CodePen.
使うシーンは限定的ですが、いろんな応用ができるかもしれません、、またいい応用例があれば別記事にてまとめておきたいと思います。sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories