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

Question

我试图在 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;
});

知道我做错了什么吗？

Answer 1

像所有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>

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

jquery AMD plugin - each() does not loop?

javascript

each

jquery

js-amd

jquery-1.9