jqueryのソースでわからない所があります。教えてください

Question

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

このソースのreturn this.eachのthisは何を指しているのですか？
またこの書き方はクロージャ？？というものでしょうか？

Answer 1

このソースのreturn this.eachのthisは何を指しているのですか？

ちょっと遠回りしますが、前提のお話から。

$.fn.menumaker = function(options) ～
という書き方は、jQueryオブジェクトにmenumakerというメソッドを追加しますよという宣言です。

ですので、この宣言をした場合、

$("#element").menumaker();

のような記述ができるようになります。
（引数にオプションをとっていますが、省略も可のようです）

となるとなんとなくわかるかもしれないですが、
thisはこのメソッドを呼んだ要素自体。つまり、$("#element")というjQueryオブジェクトになります。

this.eachで複数要素に対して処理を行っているのは、
id指定では1つの要素しか取得できませんが、class指定などでは複数の要素が取得できるため、
そのすべての処理をする必要があるからです。

またこの書き方はクロージャ？？というものでしょうか？

cssmenuとsettingsという変数をthis.eachで適用する関数がレキシカルに参照していることからクロージャの条件に当てはまっていますね。
クロージャの定義については初めは理解するのがなかなかに難しいので、ご自身でいろいろと検索してみるとよいかと思います。

Comments

[foo45]

わかりやすく教えていただきありがとうございました