Access the element of outer function in nested functions in jquery [duplicate]

Question

I have an each function that has change function and ajax inside..

$( ".spring_explorations" ).each(function() {
        $("#" + this.id + " select").change(function() {
            alert("t");
            $.ajax({
                type: 'POST',
                url: ('/admin/applications/get_sections_for_modal'), //pass query string to server
                data: {
                exploration_id: $("#" + this.id + " select").val()
                },
                success: function (response) {
                    $(this).parents('span').next().show();
                    $(this).parents('span').next().find("select").html(response);
                    console.log(response);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(thrownError);
                }
            })
        });
    });

I would like to access the $(this) element of spring_explorations class inside the success snippet of ajax script.

I was able to access the element of the change function by adding context: this but how can I get the element of the outer?

Thanks in advanced.

Edit:

The $(this).parents('span').next().show(); and so on are undefined because maybe the this is the ajax itself not the spring_explorations class.

I'm very sorry if this is a duplicated question. I'm just fairly new in javascript and I think this is the right place to ask this thing. If you think this is not appropriate, just close my question.

Answer 1

Just store this in a variable. It tends to be named that or me or some other type of synonym for representing this.

$( ".spring_explorations" ).each(function() {
    var that = this;
       //^ store this into variable
    $("#" + this.id + " select").change(function() {
        alert("t");
        $.ajax({
            type: 'POST',
            url: ('/admin/applications/get_sections_for_modal'), //pass query string to server
            data: {
            exploration_id: $("#" + this.id + " select").val()
            },
            success: function (response) {
                $(that).parents('span').next().show();
                //^ re-use stored `this` value
                $(that).parents('span').next().find("select").html(response);
                console.log(response);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
            }
        })
    });
});

Answer 2

why are you writing in each, you should be writing like this, if the elements are dynamic as you mentined in comments:

    $(".spring_exploration").on('change','select',function() {
         var element = this;
        alert("t");
        $.ajax({
            type: 'POST',
            url: ('/admin/applications/get_sections_for_modal'), //pass query string to server
            data: {
            exploration_id: $(element).val()
            },
            success: function (response) {
                $(element).parents('span').next().show();
                $(element).parents('span').next().find("select").html(response);
                $(element).closest(".spring_exploration") // you can access like this
                console.log(response);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
            }
        })
    });

and now you can access it using closest

Answer 3

You need to reference this from the context you want to use it in. You can use the references within nested scopes where as the value of this will change depending on the scope, as you have found out.

$( ".spring_explorations" ).each(function() {
    var _this = this;
    // You now have a reference to the node in the variable _this
    // that can be used anywhere within this functions scope

    $("#" + this.id + " select").change(function() {
        var self = this;
        // Self is now a reference to the changed element
        // that can be used within this functions scope

        // your code here that uses _this and self when you please.
    });
});