検索結果からリスト作成
ドットインストールをみてメモ
今後、APIでリスト化するのにつかうことになりそう
http://dotinstall.com/lessons/youtube_jukebox_js/7606
ajaxで結果取得できたので
次に
li 要素を動的に生成する
まずは for でまわす
for(var i=0; i<rs.feed.entry.length; i++)
rs.feed.entry.length は取得した大きさのぶん
という意味
length となっていてれば
たいていは最大量まで繰り返すことができる
このループの中で li要素を追加したいので
$(‘#list’).append(
$(‘<li class=”movie”>’)
);
とする
append() は要素を子要素として追加するというもの
#list は
id=”list” のものという意味
つまり、
#list のところへ
li 要素の class=”movie”を追加するということになる
つまり
<ul id=list>
だったのが
<ul id=”list”>
<li class=”movie”></ul>
</ul>
になる
さらにこれにソースを追加する
$(‘#list’).append(
$(‘<li class=”movie”>’)
);
から
var r =rs.feed.entry[i];
というように結果を変数に格納し
$(‘#list’).append(
$(‘<li class=”movie”>’).append(
$(‘<img>’).attr(‘src’,f[‘media$group’][‘media$thumbnail’][0][‘url’])
);
とする
.append($(‘<img>’).
で
<img> を追加して
attr(‘src’,f[‘media$group’][‘media$thumbnail’][0][‘url’])
で img の src=”” の内容を
f[‘media$group’][‘media$thumbnail’][0][‘url’]
としている
プログラムで追加された部分をソースにしてみると
<ul id=list>
だったのが
<ul id=”list”>
<li class=”movie”></ul>
</ul>
になって、今回の追加部分で
<ul id=”list”>
<li class=”movie”>
<img src=”f[‘media$group’][‘media$thumbnail’][0][‘url’]”/>
</ul>
</ul>
になる
これで li要素へサムネイル画像を設定できる
そして、まだ続きがある
<li class=”movie”>と video id と紐付ける
これは jQuery をつかう
data命令をつかってこれを行う
data(‘video-id’,f[media$group’][‘yt$videoid’][‘$t’]);
これで、検索結果を #list へ追加するソースは
$.get(url, options, function(rs) {
console.log(rs);
for (var i=0; i<rs.feed.entry.length; i++) {
var f = rs.feed.entry[i];
$(‘#list’).append(
$(‘<li class=”movie”>’).append(
$(‘<img>’).attr(‘src’, f[‘media$group’][‘media$thumbnail’][0][‘url’])
).data(‘video-id’, f[‘media$group’][‘yt$videoid’][‘$t’])
);
}
}, “json”);
});
となる