これを別の関数に渡して$(これ)を得る方法

私は each ループ(DOMオブジェクト)内の this を別の関数に渡しますが、その関数には $を使用するコードの一部があります)(jQueryオブジェクト)。私はどのようにDOMオブジェクトからjQueryオブジェクトを得ることができるのだろうか。私は $(obj)を使っても動作すると思ったが、それはできないだろう!

私は例を挙げてこれをもっと説明します。

私は次の関数の一部を別のメソッドに抽出したい:

    addWidgetControls : function() {
    //...            
    $(settings.widgetSelector, $(settings.columns)).each(function() {
        var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
        if (thisWidgetSettings.removable) {
            $('CLOSE').mousedown(function (e) {
                e.stopPropagation();    
            }).click(function() {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0    
                    },function() {
                        $(this).wrap('<div/>').parent().slideUp(function() {
                            $(this).remove();
                        });
                    });
                return false;
            }).appendTo($(settings.handleSelector, this));
        }
    });        
},

以下は抽出されたメソッド(動作していない)です:

    addWidgetControls: function() {
    //...
    $(settings.widgetSelector, $(settings.columns)).each(function() {
        iNettuts.doWidget(this);
    });
},

doWidget: function (widg) {
    $ = jQuery;
    settings = iNettuts.settings;
    var thisWidgetSettings = iNettuts.getWidgetSettings(widg.id);
    if (thisWidgetSettings.removable) {
        $('').mousedown(function (e) {
            e.stopPropagation();
        }).click(function() {
            $(widg).parents(settings.widgetSelector).animate({
                opacity: 0
            }, function() {
                $(widg).wrap('<div/>').parent().slideUp(function() {
                    widg.remove();
                });
            });

            return false;
        }).appendTo($(settings.handleSelector, widg));
    }
    //...

thiswidg に変更した以外は、元のメソッド( addWidgetControls )から doWidget コード>どこにでもあります。しかし、それは動作しません。

私は問題を調査し、元の関数( addWidgetControls )の each ループの中に正確なコードをコピーし、すべての $(widg) $(this)に置き換え、 widgthis に置き換えませんでした。そしてそれは正しく働いた。 (以下のコード:)

addWidgetControls : function() {
    //...

    $(settings.widgetSelector, $(settings.columns)).each(function() {
        var wid = this;
        var thisWidgetSettings = iNettuts.getWidgetSettings(wid.id);
        if (thisWidgetSettings.removable) {
            $('CLOSE').mousedown(function (e) {
                e.stopPropagation();    
            }).click(function() {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0    
                    },function() {
                        $(this).wrap('<div/>').parent().slideUp(function() {
                            $(this).remove();
                        });
                    });
                return false;
            }).appendTo($(settings.handleSelector, wid));
        }
    });        
},

This means that somehow $(this) is different than $(widg) when this is the same as widg

PS: I've got this code from this tutorial

0
ごめんなさい。もう一度お読みください。私はそれを説明するためのコードを追加しました。私はそれがはっきりしていることを望む
追加された 著者 Alireza Noori,
あなたは次のような意味を持っています: var jwid = $(this)そしてそれを関数に渡しますか?もしそうなら、私はこれを試してみましたが、どちらもうまくいきませんでした!
追加された 著者 Alireza Noori,
コードが正しく動作しているかどうか、また動作していないかどうかはわかりません。
追加された 著者 Dave Newton,
なぜあなたはすべての 'この'ビジネスですべての混乱を追加しているのか分かりません。 $(this)呼び出しをローカル変数にキャッシュしないでください(混乱を避けるため、より良いパフォーマンス)、この方法では、これが使用されていることを正確に知っています!
追加された 著者 omarello,

5 答え

$ widg の代わりに widg を変えずに $(this)にしておかなければならないと思います。それぞれの と this が毎回変わるので、その関数をループで呼び出すことになります。しかし、この変数がその関数の中の同じ this を指し示すたびに widg を使うと、あなたはあなたの関数を呼び出すでしょう。

1
追加された
答えてくれてありがとう。私は、 iNettuts.doWidget(this); は、 widg として、またそれぞれ doWidget として thiswidg )を更新します。私が間違っている?質問をもう一度読んでください、私はそれをもっと説明しました。
追加された 著者 Alireza Noori,
私は知っていますが、私は this を関数に渡して widg として使用することで対応していると思います。はい、私はそれを試しました、運はありません:(
追加された 著者 Alireza Noori,
@AlirezaNoori最初のコードと作業コードでは、すべての this 変数が異なる点を指しています。あなたの最後のコードは正しいです。 widg の代わりに this を使うべきです。 >その上位レベルの ``これ。
追加された 著者 kamaci,

関数のコンテキスト( this の代入)を設定する場合は、 apply または call を使用できます。次に例を示します。

var obj = "testing";

var func = function() {
  alert(this);
}

func();
func.apply(obj);

さて、ブラウザでコードを実行します(私は火元爆発を使用しました)。

すべてのオブジェクトのデフォルトコンテキストがウィンドウオブジェクトに流れ込むので、最初の警告はウィンドウオブジェクトになります。 2番目のアラートは、コンテキストが「テスト」という文字列に設定されているため、アラートの内容と同じです。

したがって、 call で使用されたとおり、 apply を使用することもできます。

更新

あなたがコードを使用しているとき:

$(settings.widgetSelector, $(settings.columns)).each(function() {
    iNettuts.doWidget(this);
});

this refers the object that the .each() method is on. Did you want it to work this way?

1
追加された
何が問題なのか分かりませんが、 applycall の両方を試しました。
追加された 著者 Alireza Noori,
それはまさに私が望んでいたものですが、私自身の答えを見れば、このとの違いを認識していなかったいくつかの this 。
追加された 著者 Alireza Noori,
はい、あなたたちのおかげで、私の問題は解決しました。私は答えを選ぶのを待っている。
追加された 著者 Alireza Noori,
@AlirezaNooriええ、時には this esを追跡するのは難しいです。あなたの質問に答えたのですか、それともまだ問題がありますか?
追加された 著者 natedavisolds,

私はこれが原因だと思う:

 widg.wrap('<div/>').parent().slideUp(function() {
    widg.remove();
 });

widg を$()でラップするのを忘れた:

 $(widg).wrap('<div/>').parent().slideUp(function() {
    $(widg).remove();
 });
1
追加された
申し訳ありません。私は間違ったバージョンをコピーしました。私はそれをしましたが、どちらも助けになりませんでした。
追加された 著者 Alireza Noori,
それで大丈夫です。私の最後の投稿はあなたを助けるかもしれません;)。
追加された 著者 fflorent,

おそらく、 Function.prototype.call()メソッド。

addWidgetControls : function() {
//...            
   $(settings.widgetSelector, $(settings.columns)).each(function() {
       iNettuts.doWidget.call(this);
   }); 
},
doWidget: function(){
    var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
    if (thisWidgetSettings.removable) {
        $('CLOSE').mousedown(function (e) {
            e.stopPropagation();    
        }).click(function() {
                $(this).parents(settings.widgetSelector).animate({
                    opacity: 0    
                },function() {
                    $(this).wrap('<div/>').parent().slideUp(function() {
                        $(this).remove();
                    });
                });
            return false;
        }).appendTo($(settings.handleSelector, this));
    }
}
1
追加された
私はこれを試したが、うまくいかなかった。それ以外の点では、このメソッドを抽出するポイントは、このオブジェクトを後でこのコードを使って呼び出すことです。 iNettuts.doWidget($ newItem.get(0));
追加された 著者 Alireza Noori,

すべての答えをありがとう。問題は解決され、それは本当に面白くて見つけやすいものでした!我々の知っている this ポインタは時々異なるが、この場合、 this のインスタンスは<�コード> widg 。 @ kamaciの答えだけでなく、いくつかの他の答えは私がそれを解決するために私に示唆した。ここに最終コードがあります:

addWidgetControls: function() {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,
        func = this.doWidget;

    $(settings.widgetSelector, $(settings.columns)).each(function() {
        func(this);
    });
},

doWidget: function (wid) {
    var $ = iNettuts.jQuery,
        settings = iNettuts.settings;

    var thisWidgetSettings = iNettuts.getWidgetSettings(wid.id);
    if (thisWidgetSettings.removable) {
        $('').mousedown(function (e) {
            e.stopPropagation();
        }).click(function() {
            $(this).parents(settings.widgetSelector).animate({
                opacity: 0
            }, function() {
                $(this).wrap('<div/>').parent().slideUp(function() {
                    $(this).remove();
                });
            });

            return false;
        }).appendTo($(settings.handleSelector, wid));
    }

    if (thisWidgetSettings.collapsible) {
        $('').mousedown(function (e) {
            e.stopPropagation();
        }).toggle(function() {
            $(this).css({ backgroundPosition: '-38px 0' })
                    .parents(settings.widgetSelector)
                        .find(settings.contentSelector).hide();
            return false;
        }, function() {
            $(this).css({ backgroundPosition: '' })
                    .parents(settings.widgetSelector)
                        .find(settings.contentSelector).show();
            return false;
        }).prependTo($(settings.handleSelector, wid));
    }
},
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript