jquery プラグイン化時のresizeイベント

Question

(function ($) {
	$.fn.test = function (options) {
		//プラグイン宣言
		options = $.extend({
			test: 0.6,
			
		}, options);


		$(window).on("load resize",function () {

			this.each(function () {

				//ここに処理
				
			});
		});
		 return this;
	};
})(jQuery);

プラグイン化する際に
windowにリサイズイベントを設定してからwindowではないhtml状の要素をeach処理したいのですが
この方法だとプラグイン化する際にエラーが出てしまいエラーが出ないでプラグイン化するやり方がわかりません

Answer 1

load, resizeのイベントハンドラー内のthisはwindowです。
そのため、this.each()はエラーになります。
$.fn.each()で反復処理したいjQueryオブジェクトを、あらかじめ変数にいれておくことで解決できます。

(function ($) {
    $.fn.test = function (options) {
        var self = this // jQueryオブジェクトを変数に代入しておく

        $(window).on("load resize",function () {
            console.log(this) // -> window

            self.each(function () {
                console.log(this) // -> jQueryオブジェクトに含まれる各要素
            });
        });
    };
})(jQuery);

補足
生のJavaScriptでも、jQueryでも、通常（functionで定義した）イベントハンドラーのthisはイベントが発生した要素になります。
アロー関数を使用した場合のthisはコンテクストに依存しますが、event.targetやevent.currentTargetなど、イベントオブジェクトのプロパティから当該の要素を取得できます。

(function ($) {
    $.fn.test = function (options) {
        var self = this

        $(window).on("load resize",(event) => {
            console.log(this === self) // -> true
            console.log(event.target) // -> window
        });
    };
})(jQuery);

Comments

[teta]

ありがとうございます。できました。

[NozomuIkuta]

解決したようでよかったです。