時間に基づいてリスト項目を表示する

Question

私は自分のウェブサイトでオーディオプレーヤーを作成しました。

再生中のトラックに時間ベースのコメントが付いていて、トラックの進行状況がコメントのタイムスタンプに当たったときに表示させたい場合があります。

設定はulで、コメントはliとなります。 liはデフォルトでは表示されません。コメントのタイムスタンプをliのデータ属性に追加しました。

例：

<ul class="comments"> 
    <li data-timestamp="0">Check my page fans : http://www.facebook.com/ITBFLR</li> 
    <li data-timestamp="185525">great sub!</li> 
    <li data-timestamp="256931">@greenmono: Haha thank's dude</li> 
    <li data-timestamp="497073">Wicked mix de ;)</li> 
</ul> 

トラック（100 +）に多くのコメントが存在する場合があります。私のプレーヤーは、ミリ秒単位で現在のトラック進行を返します。

liすべてを現在のトラックの進行状況よりも小さいタイムスタンプで一致させるセレクタを使用できますか？

jQuery用のカスタムセレクタプラグインがいくつかあります（たとえばA better data selector for jQuery）が、これは大きなボトルネック（パフォーマンスが賢明）かどうか疑問に思っています。

So：このソリューションを使用するのが賢明でしょうか、間違っていますか？

Answer 1

いつでもDOMをオンロードして内部オブジェクトにデータを保存することができます。次に、DOMに触れたり移動したりすることなく、必要なときに関連するデータを取得します。この仕事かもしれないような

何か：

var data = [], 
    i = 0; 

$(function() { 
    $('.comments').find('li').each(function() { 
     data.push({ 
      ts: this.getAttribute('data-timestamp'), 
      el: $(this).hide() 
     }); 
    }); 
}); 

onProgress(function(timestamp) { // simulated callback from the player 
    while(data[i].ts < timestamp) { 
     data[i++].el.show(); 
    } 
}); 

I君は、私はおそらくそれ他の方法で回避するだろうどこ場合。サーバーからJSONデータを出力し、JavaScriptを使用してリスト要素を作成します。 "no js"フォールバックが本当に必要な場合を除き...