How do I reference the outer “$(this)” in jquery?

Question

Let's say I have code like this:

$('.myClass').each(function(){
    $('#' + $(this).attr('id') + "_Suffix").livequery('click', function(){
        doSomething($(this));
    });
});

The $(this) that I pass to the doSomething function is what's in the second jquery parenthesis - $('#' + $(this).attr('id') + "_Suffix"). How do I reference what's in the first parenthesis - what the original this referred to? ( $('.myClass').each )

I assume I could save it into a variable, and then use that variable:

$('.myClass').each(function(){
    outerThis = $(this);
    $('#' + $(this).attr('id') + "_Suffix").livequery('click', function(){
        doSomething($(outerThis));
    });
});

But is there any way to reference it without doing this?

Answer 1

You need to put it in a separate variable:

$('.myClass').each(function(){
    var outer = $(this);
    $('#' + $(this).attr('id') + "_Suffix").livequery('click', function(){
        doSomething(outer);
    });
});

Also, livequery is deprecated; you should use live instead.

Answer 2

Try to use local variable

 $('.myClass').each(function(){
    var myclassObj = $(this);
        $('#' + myclassObj.attr('id') + "_Suffix").livequery('click', function(){
            doSomething($(this));
        });
    });

Answer 3

Just save the scope in local variable:

$('.myClass').each(function(){
    var self = $(this);
    $('#' + $(this).attr('id') + "_Suffix").livequery('click', function(){
        doSomething($(this));
    });
});