jQuery两次.load()请求链式调用时第二个覆盖第一个的问题

你遇到的核心问题很明确：每次调用.load()都会直接替换目标容器的全部内容，所以第二次调用会把第一次加载的第一个链接完全覆盖掉，这就是为什么第一个链接只短暂显示就消失了。另外要给每个链接单独加前置状态容器，我们可以从「减少请求+统一处理」的角度来优化方案，下面给你两种靠谱的解决思路：

方法一：一次性加载前两个链接（最优解） #

直接用选择器选中目标页面里的前两个<a>标签，一次请求完成加载，然后再逐个给链接添加前置容器、处理访问状态。这种方式只发一次HTTP请求，效率最高，也不会有覆盖问题。

代码示例：

$('.showlinks').load('http://example.com/links/ .static-links a:lt(2)', function() {
  // 遍历每个加载完成的链接，添加专属的状态容器
  $('.showlinks a').each(function() {
    $(this).before('<div class="read-unread">Unread</div>');
  });
  
  // 调用visited插件标记已访问链接
  $('.showlinks a').visited('visited-link');
  
  // 更新已访问链接的状态文本
  $('.showlinks a.visited-link').prev()
    .addClass('read')
    .text('Read');
});

这里用:lt(2)选择器直接匹配前两个<a>标签，一次性加载到.showlinks里，然后通过.each()遍历每个链接，给它们分别加上前置的.read-unread容器，完美实现「每个链接对应一个状态框」的需求。

方法二：分两次加载并追加（特殊场景用） #

如果因为某些特殊原因必须分两次加载（不推荐，会多一次请求），那第二次加载时不能直接用.load()替换容器，而是要把内容追加进去。可以借助临时容器来加载第二个链接，再把它加到目标容器里：

// 第一次加载第一个链接
$('.showlinks').load('http://example.com/links/ .static-links a:first', function() {
  // 给第一个链接加状态容器
  $('.showlinks a:first').before('<div class="read-unread">Unread</div>');
  
  // 创建临时容器加载第二个链接，再追加到目标容器
  $('<div>').load('http://example.com/links/ .static-links a:nth-of-type(2)', function() {
    // 把临时容器里的链接移到.showlinks，并加状态容器
    $(this).find('a').before('<div class="read-unread">Unread</div>').appendTo('.showlinks');
    
    // 统一处理访问状态
    $('.showlinks a').visited('visited-link');
    $('.showlinks a.visited-link').prev()
      .addClass('read')
      .text('Read');
  });
});

关于之前方案失效的说明 #

你提到尝试charlietfl的方案后只加载了第一个链接，大概率是a:nth-of-type(2)的选择器上下文问题——如果第一次加载后DOM结构变化，或者加载时的选择器匹配范围出错，就会找不到第二个链接。而用:lt(2)直接选中前两个元素，匹配逻辑更简单可靠。

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