Is it possible to use $(this) in a function called from another function?

Question

Sorry for the question title, I know it's not very well worded, but I couldn't really explain what I'm asking in a summary.

I have a JQuery function tied to the click event of an element. For reasons that may well be flawed (other than making more sense to me personally), within this function I am calling another function. From the second function, I'd like to be able to call $(this) from the first function, but I'm not sure if it's possible, or how to do it if I can

Example

JQuery function which works

$('.member-div a').on("click",function(f){
    f.preventDefault();
    var x = $(this).parent('div').attr('id').slice(-1);
    $('.member-div').hide();
    if($(this).hasClass('next')){
        var y = parseInt(x)+1;
    };
    if($(this).hasClass('back')){
        var y = parseInt(x)-1;
    };
    $('#section'+y).show();
});

What I'm trying to do

$('.member-div a').on("click",function(f){
    f.preventDefault();
    newfunc();
});

function newfunc(){
    var x = $(this).parent('div').attr('id').slice(-1);
    $('.member-div').hide();
    if($(this).hasClass('next')){
        var y = parseInt(x)+1;
    };
    if($(this).hasClass('back')){
        var y = parseInt(x)-1;
    };
    $('#section'+y).show();
};

I think I understand why the second way doesn't work ($(this) will not be the anchor tag from the initial function), but I am lost as to how to make it work

If I have to, or if anyone can explain that/why it is better to, I will stick with the original example that works!

Thanks

Answer 1

Always be careful when using the this as you may end up using an unexpected value depending on the context your function was called.

Instead, you should consider using a parameter:

$('.member-div a').on("click",function(f){
    f.preventDefault();
    newfunc($(this));
});

function newfunc(item){
    var x = item.parent('div').attr('id').slice(-1);
    $('.member-div').hide();
    if(item.hasClass('next')){
        var y = parseInt(x)+1;
    };
    if(item.hasClass('back')){
        var y = parseInt(x)-1;
    };
    $('#section'+y).show();
};

Answer 2

You could pass the this reference to the function like this:

$("a").on("click", function() {
     foo(this);
});

function foo(obj) {
     if ($(obj).hasClass("next")) {
         // ...
     }
}

$(obj) then works the same as $(this).

Answer 3

You can pass the 'this' as a variable to the other function:

$('.member-div a').on("click",function(f){
f.preventDefault();
newfunc(this);
});

and then catch the 'this' by a paramter in the new function:

function newfunc(elem){}

Answer 4

You can use .call() or .apply() to pass another this:

newfunc.call(this);