使用Javascript/jQuery高效地跟踪和更新DOM元素数组？

在我正在编写的一个模块（类似于滑块/时间轴界面组件）中，我有一个方法可以更新控件，这些控件是底部的一组可单击元素，在单击和用户滚动时更新

我将执行以下操作，将类附加到项目，直到活动项目。虽然我使用的方法有效，但由于每次都在一组DOM元素上循环，所以感觉效率非常低

     updateTimeLine : function(pos, cb) {

        var p = pos;
        var timeline = $('.timer').toArray();
        if (p > 15)
            p = 15;

        $.each(timeline, function(index,value) {
            var that = $(this);
            if (index >= p) {
                if (that.children('span').hasClass('active'))
                    that.children('span').removeClass('active');
            } else {
                that.children('span').addClass('active');
            }
        });

        if (cb && typeof(cb) === "function") {
            cb();
        }

        return this;
    },

有更好的方法吗？如果是，怎么做

---

这是一个很好的用例吗？我还没有完全理解它，因为我还没有花时间研究它，所以如果是的话，我真的想知道如何正确地应用这个模式。

观察者模式通过循环并在发生相关更改时调用每个订阅者上的侦听器来通知订阅的对象。因此，您可能最终会使用

$。无论如何，每个
。我认为你所拥有的同样有效

如果您每次迭代DOM感到不舒服，请考虑：不存在这样的算法，可以在不重复它们的情况下更新每个DOM元素。从理论上讲，缓存DOM数组可以提高性能，但我的钱说浏览器已经在这样做了。您可以自己尝试一下……
您可以在选择器和方法中做更多的工作，而不是在循环和流中。像（未测试的）
$（'.timer span'）.removeClass（“active”）.slice（p）.addClass（“active”）
之类的东西也会尝试这种方法。是的，我意识到需要两条链，而不是一条（不要切片跨度，切片.timer），但概念是一样的。我认为你在循环中所做的一切都是在链中完成的，即使你实现了主题观察者模式，你仍然必须在每次更新时循环观察者。我认为你的方法可能相当有效。缓存DOM数组理论上可以避免每次迭代都遍历DOM，但浏览器似乎已经优化了@$#！DOM外查询。请参阅my@JamesM.Lay，是否要添加此项作为答案，以便我可以结束此问题？