Question

此对象引用在 $.each 内不起作用

2011-10-19

210

javascript jquery

为什么 foo 不会被附加？

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

                    }
})

Answer 1

因为在 each 中， this 被设置为当前正在迭代的元素（ docs ），所以通常我们在进入 each 循环之前将 this 定义为其他内容：

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');
});

然而，在这种情况下，AJAX 请求的 success 回调中的 this 等于启动请求的 jqXHR 对象，而不是您要查找的 DOM 元素，因此我们必须将 var that = this 移到更远的地方；

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');
        });

    }
})

Answer 2

var $this = $('#Selector').parent().parent();
$.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>';
                            $this.append('foo');
                        });

                    }
})

编辑：

将 .parent().parent() 添加到原始选择器，因此您无需在每个循环中调用它

Answer 3

响应可能不是数组，而只是字符串。尝试将响应分配给一个元素，然后在执行 .each() 之前使用选择器抓取该元素中的所有子元素