Question

I’m passing this inside an each loop (DOM object) to another function but in that function, there is a part of the code that uses $(this) (jQuery object). I wonder how can I get the jQuery object from the DOM object. I thought that using $(obj) will work but it won’t!!!

I explain this more with an example.

I want to extract some part of the following function to another method:

    addWidgetControls : function () {
    //...            
    $(settings.widgetSelector, $(settings.columns)).each(function () {
        var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove">CLOSE</a>').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));
        }
    });        
},

Below is the extracted method (not working):

    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) {
        $('<a href="#" class="remove"></a>').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));
    }
    //...

The code in the doWidget function is copied from the original method (addWidgetControls), except I’ve changed this to widg anywhere in it. But it won’t work.

I’ve investigated the problem and copied the exacted code inside the each loop of the original function (addWidgetControls) and replaced all $(widg) into $(this) and didn’t replace widg with this. And it worked properly. (code below:)

addWidgetControls : function () {
    //...

    $(settings.widgetSelector, $(settings.columns)).each(function () {
        var wid = this;
        var thisWidgetSettings = iNettuts.getWidgetSettings(wid.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove">CLOSE</a>').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

Answer 1

Thanks for all of the answers. The problem is solved and it was really interesting and easy to find! The this pointer, as we all know, is different from time to time, and in this case, there were only 3 instances of this that should’ve been replaced with widg. @kamaci’s answer as well as some other answers hinted me to solve it. So here is the final code:

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) {
        $('<a href="#" class="remove"></a>').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) {
        $('<a href="#" class="collapse"></a>').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));
    }
},