FC2ブログ

検索結果からリスト作成

検索結果からリスト作成

ドットインストールをみてメモ
今後、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");
});
となる
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック