2013-07-26 2 views
0

У меня проблема с методом .filter jQuery. Мой код выглядит следующим образом (сильно лишенный не соответствующих бит).jQuery «фильтр» не обновляется после удаления элементов

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

Как я могу обойти это?

Благодаря

+0

Вы просто передаете одну и ту же коллекцию, поэтому, если вы снова не получите элементы из DOM, как вы можете ожидать, что эта же старая коллекция элементов будет обновляться. – adeneo

ответ

2

Проблема, кажется, что множество base.$items не живой набор, это означает, что даже если вы изменить порядок элементов в йот множество не знает об этом

Попробуйте

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

Так просто, и, конечно же, он работает. Спасибо за вашу помощь – Typhoon101

2

проблема заключается в том, что вы выбираете соответствующие пункты в вашей функции инициализации:

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

base. $ Items теперь объект jquery, который больше не изменяется. Вам нужно будет выполнить этот код каждый раз, когда ваш таймер «клеится».

Смежные вопросы