0

我对 jQuery 的 .filter 方法有疑问。我的代码如下（大量剥离了不相关的位）。

(function($) {
    $.ticker = function( el, options ) {
        // to avoid scope issues, use 'base' instead of 'this'
        var o, base = this;

        base.el = el;
        base.$el = $(el);

        base.init = function() {
            base.options = o = $.extend( {}, $.ticker.defaultOptions, options );
            base.$items = base.$el.find(' ul > li');
            base.timer = null;

            base.startTimer();
        }

        base.animate = function( ) {
            base.$items.filter(':eq(0)').appendTo(base.$el.find('ul'));
        }

        // initialise the object
        base.init();
    };

    $.ticker.defaultOptions = {
        delay: 2000,
        transitionSpeed: 700
    }

    $.fn.ticker = function(options) {
        return this.each(function() {
            (new $.ticker(this, options))
        })
    }
})(jQuery);

我希望这样做，每 2 秒，“base.animate”函数会将第一个 LI 项目从 UL 标签的顶部移动到底部。这是第一次工作，但对于后续迭代，最后一个LI 项目（曾经是第一个）被移动到 UL 标记的末尾。似乎.filter(':eq(0)')一直在引用曾经是第一项的内容，而不是引用“当前”的第一个 LI 项。

我怎样才能解决这个问题？

谢谢

4

2 回答 2

2

问题似乎是该集合base.$items不是实时集合，这意味着即使您更改 dom 中的项目顺序，该集合也不知道它

尝试

    base.animate = function( ) {
        base.$items.filter(':eq(0)').appendTo(base.$el.find('ul'));
        base.$items = base.$el.find(' ul > li');
    }
于 2013-07-26T11:42:03.847 回答
2

问题是您在 init 函数中选择了相关项目：

base.$items = base.$el.find(' ul > li');

base.$items 现在是一个不再改变的 jquery 对象。每次计时器“滴答”时，您都必须执行该代码。

于 2013-07-26T11:42:59.813 回答