jQueryを使ってHTMLのclassで配列化しその属性値をオブジェクトデータとして配列に追加

データ構造

配列でグループ化したデータで個々の配列が複数の属性値を持つ場合に、

オブジェクト配列を利用して、配列内にオブジェクトデータを追加すると理解しやすいデータ構造を定義することが出来ます。

JavaScriptでオブジェクト配列を作成するコードは以下の通りです。

array[index] = {
  name: "kiyoharu",
  url: "http://webengineer.local",
  skill: "PHP"
};

HTMLから動画のiframeを配列化し、属性値をオブジェクト化

オブジェクト配列の具体的なサンプルとして、

HTMLからiframeタグを収集し、iframeに設定されている属性をオブジェクトデータとして配列に追加

するコードを書いてみる。

var video = [];
var tmp_photo = 'http://webengineer.local/images/tmp.png';

// some-videoというclass属性が付いたiframeを対象にループ処理
$('.some-video').each(function(index, element) {

  // iframeの属性値オブジェクト配列化
  video[index] = {
    width: $(this).attr('width'),
    height: $(this).attr('height')
  };

  // 動画の代わりに代替画像を表示
  $(this).after('<img src="'+tmp_photo+'" class="tmp-photo" width="'+video[index].width+'" height="'+video[index].height+'">').remove();
});

youtubeなどの動画のiframeにclass属性を設定し、

• iframeを配列化
• iframeの属性をオブジェクト化

してデータ構造を定義した上で、そのデータを利用して動画の代わりに初期表示する代替画像を動的にサイズを指定して表示するコードになる。

オブジェクト配列を利用すれば、

グループ化したHTMLタグの個々の属性値

を効率的にデータ構造にして利用することが出来る。