現在選択されている回答の問題は、あなたがやっていると思うように、セレクターのすべての要素に対してカスタムプラグインの新しいインスタンスを実際に作成していないことです...実際には単一のインスタンスを作成して渡しているだけですスコープとしてのセレクター自体。
より深い説明については、このフィドルを参照してください。
代わりに、jQuery.eachを使用してセレクターをループし、セレクターのすべての要素に対してカスタム プラグインの新しいインスタンスをインスタンス化する必要があります。
方法は次のとおりです。
(function($) {
var CustomPlugin = function($el, options) {
this._defaults = {
randomizer: Math.random()
};
this._options = $.extend(true, {}, this._defaults, options);
this.options = function(options) {
return (options) ?
$.extend(true, this._options, options) :
this._options;
};
this.move = function() {
$el.css('margin-left', this._options.randomizer * 100);
};
};
$.fn.customPlugin = function(methodOrOptions) {
var method = (typeof methodOrOptions === 'string') ? methodOrOptions : undefined;
if (method) {
var customPlugins = [];
function getCustomPlugin() {
var $el = $(this);
var customPlugin = $el.data('customPlugin');
customPlugins.push(customPlugin);
}
this.each(getCustomPlugin);
var args = (arguments.length > 1) ? Array.prototype.slice.call(arguments, 1) : undefined;
var results = [];
function applyMethod(index) {
var customPlugin = customPlugins[index];
if (!customPlugin) {
console.warn('$.customPlugin not instantiated yet');
console.info(this);
results.push(undefined);
return;
}
if (typeof customPlugin[method] === 'function') {
var result = customPlugin[method].apply(customPlugin, args);
results.push(result);
} else {
console.warn('Method \'' + method + '\' not defined in $.customPlugin');
}
}
this.each(applyMethod);
return (results.length > 1) ? results : results[0];
} else {
var options = (typeof methodOrOptions === 'object') ? methodOrOptions : undefined;
function init() {
var $el = $(this);
var customPlugin = new CustomPlugin($el, options);
$el.data('customPlugin', customPlugin);
}
return this.each(init);
}
};
})(jQuery);
そして、実用的なフィドル。
最初のフィドルで、すべての div が常に正確に同じピクセル数だけ右に移動されることに気付くでしょう。これは、セレクター内のすべての要素に対してオプション オブジェクトが1 つしか存在しないためです。
上記の手法を使用すると、2 番目のフィドルで、各 div が整列されておらず、ランダムに移動されていることがわかります (ランダマイザーは常に 89 行で 1 に設定されているため、最初の div は除きます)。これは、セレクター内のすべての要素に対して新しいカスタム プラグイン インスタンスを適切にインスタンス化しているためです。すべての要素には独自のオプション オブジェクトがあり、セレクターには保存されませんが、カスタム プラグイン自体のインスタンスに保存されます。
これは、新しい jQuery セレクターから DOM の特定の要素でインスタンス化されたカスタム プラグインのメソッドにアクセスできることを意味し、最初のフィドルのようにそれらを強制的にキャッシュする必要はありません。
たとえば、これは 2 番目のフィドルの手法を使用して、すべてのオプション オブジェクトの配列を返します。最初は undefined を返します。
$('div').customPlugin();
$('div').customPlugin('options'); // would return an array of all options objects
これは、最初のフィドルで options オブジェクトにアクセスする必要がある方法であり、それらの配列ではなく、単一のオブジェクトのみを返します。
var divs = $('div').customPlugin();
divs.customPlugin('options'); // would return a single options object
$('div').customPlugin('options');
// would return undefined, since it's not a cached selector
現在選択されている回答のものではなく、上記の手法を使用することをお勧めします。