jquery AMD 插件 - each() 不循环?

jquery AMD plugin - each() does not loop?

我试图在 AMD 模式中制作一个 jquery 插件,但似乎无法让 each() 循环。它只有 return 第一个 项目,但我有三个项目。

index.html,

<body>
    <div class="element">
        1
    </div>

    <div class="element">
        2
    </div>

    <div class="element">
        3
    </div>
</body>

在htmlhead,

$(document).ready(function(){
    $(".element").plugin2().data('plugin_plugin2').someMethod();
});

plugin.js,

!function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function($) {

    var pluginName = 'plugin2',
        defaults = {
            param1:       'param1',
            param2:       'param2'
        };

    var Plugin = function(element, options) {
        this.element    = element;
        this.options    = options;
    };

    Plugin.prototype = {
        constructor: Plugin,

        someMethod: function(options) {
            var rootScope = this;

            return rootScope.element.each(function(e){

                console.log(e); // you get 0 only
                console.log(this); // the first <div class="element"> only

            });
        }
    };

    $.fn[pluginName] = function(options) {
        options = $.extend(true, {}, defaults, options);

        return this.each(function() {
            var $this = $(this);
            $this.data('plugin_' + pluginName, new Plugin($this, options));
        });
    };

    $.fn[pluginName].defaults = defaults;
    $.fn[pluginName].Plugin   = Plugin;
});

知道我做错了什么吗?

像所有jQuery的getter/setter方法一样,data是不对称的:当设置时,它设置在[=34= jQuery 集合中的所有 个元素,但是当获取 时,它只从第一个获取。

所以这一行:

$(".element").plugin2().data('plugin_plugin2').someMethod();

...只会为您提供集合中第一个元素的数据。如果你想看到所有三个的数据,你需要循环那里,太:

$(".element").plugin2().each(function() {
    $(this).data('plugin_plugin2').someMethod();
});

但从根本上说,您的代码所做的并不是您在插件中实现方法的方式(尤其是出于这个原因)。相反,在插件中实现方法的通常方法是让主插件方法接受一个字符串(方法名称),例如:

$(".element").plugin2().plugin2("someMethod");

thanks. so how does it look for boilerplate for doing this -$(".element").plugin2().plugin2("someMethod");

这是一个非常简单的例子:

(function($) {
  var methods = {
    init: function() {
      // If you have to do different things on different
      // elements, use this.each(...) or similar
      this.css("color", "red");
      return this;
    },
    color: function(color) {
      // If you have to do different things on different
      // elements, use this.each(...) or similar
      this.css("color", color);
      return this;
    },
    increment: function(color) {
      // For example, this is effectively a `this.each(...)`:
      this.text(function() {
        return +$(this).text() + 1;
      });
      return this;
    }
  };
  var slice = Array.prototype.slice;
  $.fn.foo = function(method) {
    var f = methods[method || "init"];
    if (!f) {
      throw "Unknown method for plugin `foo`: '" + method + "'";
    }
    return f.apply(this, slice.call(arguments, 1));
  };
})(jQuery);

setTimeout(function() {
  $(".element").foo();
}, 500);
setTimeout(function() {
  $(".element").foo("color", "green");
}, 1000);
setTimeout(function() {
  $(".element").foo("increment");
}, 1500);
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>