插件没有按我的预期工作

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() 完全相同，因为我实际上返回了 的值下一个（）。

我的 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);