Question

Why won’t foo get appended?

$.ajax({
                type: 'GET',
                dataType: 'json',
                cache: false,
                url: 'barfoochakalaka',
                success:
                    function(response) {
                        $.each(response, function(index, val) {                             
                            $(this).parent().parent().append('foo');
                        });

                    }
})

Answer 1

Because inside each, this is set to the current element being iterated over (docs), so normally we define this to be something else before we enter the each loop:

var that = this;
$.each(response, function(index, val) {
    var content = '<div class="link-history">'+ val.date + ', ' + val.userid + ', ' + val.status + '</div>';
    $(that).parent().parent().append('foo');
});

However, in this circumstance, this in the success callback of an AJAX request is equal to the jqXHR object which launched the request, not the DOM element you’re after, so we have to move the var that = this to even further away;

var that = this;
$.ajax({
    type: 'GET',
    dataType: 'json',
    cache: false,
    url: 'barfoochakalaka',
    success: function(response) {
        $.each(response, function(index, val) {
            var content = '<div class="link-history">' + val.date + ', ' + val.userid + ', ' + val.status + '</div>';
            $(that).parent().parent().append('foo');
        });

    }
})