如何使用.each方法获取对应TXT文件并正确渲染至对应Div？

嘿，我太懂你这个问题了——这是异步操作里非常典型的上下文绑定陷阱！咱们先拆解下为什么会出现所有<div class="parent">都显示最后一个文件内容的原因：

问题根源 #

你的$.get是异步请求，当你在$('.parent').each()循环里发起请求时，循环会快速跑完，而所有请求的回调函数要等服务器返回数据后才会执行。这时候你在回调里用$('.parent').html(data)，会选中页面上所有带.parent类的元素，把它们的内容都替换成当前回调拿到的数据。最后一个请求完成得最晚，自然就把所有元素的内容都覆盖成它的了。

修复方案 #

核心思路就是：在每次循环迭代中，保存当前.parent元素的专属引用，让回调函数知道它该更新哪一个元素，而不是全部。

修改后的代码如下：

function loadTxt(){ 
  $('.parent').each(function(){ 
    // 保存当前迭代的parent元素，每个循环都会创建独立的作用域保存这个变量
    var $currentParent = $(this); 
    var txtId = $currentParent.parent().attr('id'); 
    
    $.get("./"+txtId+'.txt', function(data) { 
      // 只更新当前循环对应的那个parent元素
      $currentParent.html(data); 
    });
  });
};

为什么这样能行？ #

在each的每次迭代里，$(this)指向当前的.parent元素，我们把它存在$currentParent变量里。由于JavaScript的函数作用域特性，每个回调函数都会绑定到当前迭代的$currentParent，而不是最后一次循环的那个。这样当请求返回数据时，回调只会更新对应的那个.parent，不会影响其他元素。

额外小提示 #

如果担心多个异步请求的顺序问题，或者想在所有请求完成后做些操作，可以用$.when()来管理多个Deferred对象：

function loadTxt(){ 
  var requests = [];
  
  $('.parent').each(function(){ 
    var $currentParent = $(this); 
    var txtId = $currentParent.parent().attr('id'); 
    
    // 把每个get请求存入数组
    var request = $.get("./"+txtId+'.txt', function(data) { 
      $currentParent.html(data); 
    });
    requests.push(request);
  });
  
  // 所有请求完成后执行的操作
  $.when.apply($, requests).done(function() {
    console.log("所有文件都加载完成啦！");
  });
};

内容的提问来源于stack exchange，提问作者brunofrancisco.js