Jquery 基于时间显示列表项

我已经在我的网站上创建了一个音频播放器

在播放的曲目上可能会有基于时间的评论，我希望在曲目进度达到评论的时间戳时显示这些评论

我的设置是一个

ul

，注释为

li

s。默认情况下，

li

s是隐藏的。我已经在

li

s的数据属性中添加了注释的时间戳

例如：

<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>

检查我的页面：http://www.facebook.com/ITBFLR
棒极了
@greenmono:哈哈，谢谢你的伙计
de；）

一首曲目上可能有许多评论（100+）。我的播放器以毫秒为单位返回当前曲目进度

我可以使用选择器匹配时间戳小于当前曲目进度的所有

li

s吗

我知道jQuery有一些自定义选择器插件（例如），但我想知道这是否会成为一个巨大的瓶颈（性能方面）

---

所以：使用这个解决方案是明智的还是我做错了？

您可以始终执行DOM选择onload并将数据保存在内部对象中。然后，只要在需要时获取相关数据，而不必触摸/遍历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();
    }
});

var数据=[]，
i=0；
$（函数（）{
$（'.comments'）。查找（'li'）。每个（函数（）{
数据推送({
ts:this.getAttribute（'data-timestamp'），
el:$（this.hide（））
});
});
});
onProgress（函数（时间戳）{//模拟来自播放器的回调
while（数据[i].ts<时间戳）{
数据[i++].el.show（）；
}
});

---

如果我知道你在哪里，我可能会反过来做；从服务器打印JSON数据，然后使用JavaScript创建列表元素。除非您真的需要“无js”回退…

不管当前解决方案的性能如何：您可以创建一个二元搜索树或类似的数据结构，这样您就可以轻松地选择小于给定值的元素（键是时间戳、值、对DOM节点的引用或只插入注释）。或者使用最小堆作为优先级队列，并始终删除第一项。也许以这种方式存储数据还可以让您做其他事情。只是我的想法……：）在显示它们之前，是否有原因不在服务器端对它们进行排序？最好不要在客户机上这样做。@Asawillams nopez这只是我展示的一个坏例子：P@FelixKling你提到的事情是如何运作的。如果我没弄错的话，它们都是某种树结构。但是我怎么能用这样的东西来实现我想要的呢？