jQuery选取HTML类首个实例及父类元素被覆盖问题求助

嘿，这个问题我太熟了！本质上就是JavaScript作用域+异步回调搞的鬼——当你处理多个同名类元素，尤其是结合异步请求（比如你用的$.getJSON）时，很容易因为变量没有被正确绑定，导致后续的函数调用覆盖了第一个实例的数据。

先唠唠问题到底出在哪 #

举个例子：如果你用普通的for循环遍历所有.friend-status元素，然后在getJSON的回调里引用循环变量i或者元素引用。由于异步请求是异步执行的，当回调触发时，循环早就跑完了，i已经变成了最后一个元素的索引，所有回调都会用这个最后值，自然就把第一个实例的数据覆盖了。

或者你可能不小心在后续操作里直接选择了所有同名类元素（比如写了$('.friend-status').html(...)），而不是只操作目标实例，这也会导致数据被覆盖。

给你几个靠谱的解决办法 #

方法1：用jQuery的.each()遍历（最省心） #

jQuery的.each()方法会自动为每个迭代创建独立的作用域，帮你锁定当前元素的引用，完全不用操心作用域问题：

function buildFriendStatus() {
  $('.friend-status').each(function() {
    // 把当前元素存到局部变量，确保异步回调能拿到正确的实例
    var $currentItem = $(this);
    // 判断是不是第一个实例
    var isFirstItem = $currentItem.is('.friend-status:first');
    
    $.getJSON('/members/feed', function(data) {
      if(isFirstItem) {
        // 第一个实例的专属逻辑
        $currentItem.addClass('special').text('专属状态：' + data.specialStatus);
      } else {
        // 其余实例的通用逻辑
        $currentItem.text('常规状态：' + data.normalStatus);
      }
    });
  });
}

方法2：用闭包锁定作用域（针对普通for循环） #

如果你非得用普通for循环，那就得用**立即执行函数（IIFE）**创建闭包，把每个迭代的变量“存”起来：

function buildFriendStatus() {
  var statusItems = $('.friend-status');
  for(var i = 0; i < statusItems.length; i++) {
    // 用IIFE把当前的索引和元素封进独立作用域
    (function(currentIndex, currentElem) {
      var $elem = $(currentElem);
      var isFirst = currentIndex === 0;
      
      $.getJSON('/members/feed', function(data) {
        if(isFirst) {
          $elem.html('第一个的特殊内容：' + data.firstData);
        } else {
          $elem.html('其他内容：' + data.otherData);
        }
      });
    })(i, statusItems[i]);
  }
}

方法3：ES6的let关键字（环境允许的话用这个） #

如果你的项目支持ES6，用let代替var就能搞定——let会创建块级作用域，每次循环迭代都会生成新的变量绑定，不用写闭包：

function buildFriendStatus() {
  var statusItems = $('.friend-status');
  // 这里用let，每个循环都会有独立的i和元素引用
  for(let i = 0; i < statusItems.length; i++) {
    var $elem = $(statusItems[i]);
    var isFirst = i === 0;
    
    $.getJSON('/members/feed', function(data) {
      if(isFirst) {
        $elem.text('专属状态');
      } else {
        $elem.text('常规状态');
      }
    });
  }
}

额外提醒几个小细节 #

• 要是你只需要单独处理第一个实例，直接用$('.friend-status').eq(0)或者$('.friend-status:first')获取它，后续操作别碰所有元素；
• 异步请求的返回顺序不一定和你遍历的顺序一致，如果需要严格按顺序处理，可以试试async/await或者$.when()来管理异步流程；
• 检查一下你的其他函数，有没有不小心写了$('.friend-status').html(...)这种操作所有元素的代码，这是最容易踩的坑！

内容的提问来源于stack exchange，提问作者user2101411