плагин не работает, как я ожидал

Question

Я использовал следующий код для циклического набора элементов.

$(this).next().show().animate({top: '25px'},250,function(){ 
       $(this).addClass('active'); 
      }); 

, но это было ограничено, как мне нужно, чтобы добраться до конца списка элементов, и цикл через раз, так что я написал этот плагин:

(function($){ 
    $.fn.extend({ 
     rotater: function(class_check){ 
      return this.each(function(){ 
       if($(this).next().hasClass(class_check)){ 

        return $(this).next(); 
       } else { 

        return $(this).parent().children().first(); 
       } 
      }); 
     } 
    }); 
})(jQuery); 

Для того, чтобы определить, когда у меня было добрались до конца моего желаемого набора (все из которых имеют общий класс), и если да, возьмите первый объект, в котором снова начнется весь цикл.

Я изменил вызывающий код:

$(this).rotater('common_class').show().animate({top: '25px'},250,function(){ 
       $(this).addClass('active'); 
      }); 

, но она перестала работать совсем !! Я смущен, я понял, что мой сценарий «вернуться к началу» завершился неудачно, но, по крайней мере, первый цикл должен вести себя точно так же, как и next(), потому что я буквально возвращаю значение next().

Мой HTML выглядит следующим образом:

<div id="parent> 
    <div class="common_class"></div> 
    <div class="common_class"></div> 
    <div class="common_class"></div> 
    <div class="common_class"></div> 
    <div class="undesired_elemement"></div> 
</div> 

Answer 1

Возвращение в eachобратного вызова не имеет никакого эффекта. Функция ротатора возвращает то, что возвращается each, и это не то, что возвращает обратный вызов, но он снова возвращает this.

Решение: Не используйте each:

(function($){ 
    $.fn.extend.rotater = function(class_check){ 
     if(this.next().hasClass(class_check)){ 
      return this.next(); 
     else { 
      return this.parent().children().first(); 
     } 
    } 
})(jQuery); 

Вы только должны использовать this.each, если вы хотите применить функциональные возможности для всех элементов, выбранных селектор.

У вас может возникнуть странное поведение, хотя если выбрано более одного элемента. В этом случае вы должны явно выбрать первый элемент:

var ele = this.eq(0);