0%

Programmingプログラミングナレッジ

Posted:2018.11.15

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.

 

使うシーンは限定的ですが、いろんな応用ができるかもしれません、、またいい応用例があれば別記事にてまとめておきたいと思います。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】