picotube のプレイリスト吸出しブックマークレット(5)

↓これの続き
http://d.hatena.ne.jp/yoya/20120219/picotube

しつこいですが、今回でようやく納得バージョンです。
(そして相変わらず IE は置いてけぼり)

javascript:l='';t=$(".main_search_thumbnail");for(i=0;n=t[i],i<t.length;i++)if(p=$(n).attr('data-preview'))l+=p+' '+$(n).attr('data-title')+"\n";alert(l);

改善点

• 前回までのは DOM で何番目に並んでいるかをハードコーディングしていて変更に対して弱く、現状でも再生中でしか動かない残念な動作になっていました。

プログラムを作る過程

全て、Chrome で試して、動いてから FireFox で最終確認。

• main_search_thumbnail に欲しい情報がある事に気付く

javascript:
l = '';
t = document.getElementsByClassName('main_search_thumbnail');
for (i = 0 ; i < t.length ; i++) {
    n = t[i]
    if (p = n.getAttribute('data-preview')) {
        l += p + ' ' + n.getAttribute('data-title') + "\n";
    }
}
alert(l);

• スペースを削減し、ブロックの括弧も無くす

javascript:
l='';
t=document.getElementsByClassName('main_search_thumbnail');
for(i=0;n=t[i],i<t.length;i++)
    if(p=n.getAttribute('data-preview'))
        l+=p+' '+n.getAttribute('data-title')+"\n";
alert(l);

• jQuery を使って更にシンプルに

javascript:
l='';
t=$(".main_search_thumbnail");
for(i=0;n=t[i],i<t.length;i++)
    if(p=$(n).attr('data-preview'))
        l+=p+' '+$(n).attr('data-title')+"\n";
alert(l);

心残り

main_search_thumbnail で一覧を取ったら曲の名前、URL のエントリと別に画像だけのエントリも混ざっていたので、data-preview (= youtube のURL) がないエントリを読み捨てる事にしましたが、もう少し良い方法がないか考え中。

※ IE 未対応はあえて心残りじゃない事にしておく。気が向いたらで。