Question

在以下代码中

var entryTemplate = document.getElementById('entryTemplate');
entryTemplate = entryTemplate.firstChild;

for (var ipost in posts)
{
  var post = posts[ipost];
  var clone = entryTemplate.cloneNode(true);
  clone = $(clone);

  if (post.imageURL)
  {
    var imgElement = document.createElement('img');
    var largeImageURL = post.largeImageURL ? post.largeImageURL : post.imageURL;
    imgElement.src = post.thumbPresent ? POST_THUMB_URL + '/' + post.postID : largeImageURL;
    imgElement.alt = '';
    clone.find('div.BlogImageURL a').attr('href', largeImageURL).text(largeImageURL);
    clone.find('div.BlogImage a').attr('href', imgElement.src).append(imgElement);

    // get bytesize
    var postdata = 'inline_image_url=' + encodeURIComponent(post.imageURL);
    postdata += '&linked_image_url=' + encodeURIComponent(post.largeImageURL);
    $.ajax({
    type: 'POST',
    url: ASYNC_GET_BYTESIZE_URL,
    data: postdata,
    success: function(bytesize) {
      clone.find('.BlogImageBytesize').html(bytesize);
    }
    });
  }
  else
  {
    clone.find('div.BlogImageURL').text('(This post contains no images)');
    clone.find('div.BlogImage').remove();
  }

  $('#outputDiv').append(clone);
}

clone.find('.BlogImageBytesize').html(bytesize);

所有ajax响应（粗线）修改最后一个 clone ，可能是因为第一个响应到达时循环结束，而 clone 指向最后一个克隆

我该如何解决这个问题？

感谢。

Answer 1

也许您可以将clone设置为您的ajax调用的context。（见docs here。）然后，我认为它会像这样：

$.ajax({
    type: 'POST',
    url: ASYNC_GET_BYTESIZE_URL,
    data: postdata,
    context: clone,
    success: function(bytesize) {
      $(this).find('.BlogImageBytesize').html(bytesize);
    }
});

我不确定context是否必须是一个普通的DOM元素，或者它是否可以是一个jQuery对象，但希望这能让你走上正确的轨道。

Ajax响应和匿名函数范围

1 个答案: