链接两个jQuery .load()请求会导致第二个请求覆盖第一个请求

Question

我尝试使用.load()从同一个.static-links中加载来自div的前两个a链接。我正在看这个链接到jQuery chaining .load() requests? .load()的答案。

这是http://example.com/links/上的源html，其中包含我尝试用.load()加载的前两个链接

<div class="static-links">
<a href="http://example.com/">test 1</a>
<a href="http://example.com/link2/">test 2</a>
<a href="http://example.com/link3/">test 3</a>
</div>

但是使用这个jQuery，我没有在div .showlinks中显示两个链接

$('.showlinks').load('http://example.com/links/ .static-links a:first', function () {
$('.showlinks').load('http://example.com/links/ .static-links a:nth-of-type(2)', function () {

$('.showlinks').prepend('<div class="read-unread">Unread</div>');
$('.showlinks a').visited('visited-link');
$('.showlinks a.visited-link').prev().addClass('read');
$('.showlinks a.visited-link').prev().text('Read');

});
});

我确实在我的页面上看到了第一个链接在<div class="showlinks"></div>中加载时闪烁，然后第二个链接显示在上面。所以我需要这两个链接被显示，一个接一个。

由于我使用了一个名为jquery.visited.js https://github.com/ardouglass/jquery-visited/blob/master/src/visited.js的jQuery函数，这一点变得复杂起来。我在前面加上了一个div。但是，当不链接两个.load请求时，jquery.visited.js使用单个.load()就可以很好地工作。

如何正确地链接两个.load()函数？我需要一个不同的回调吗？那么prepend如何在每个链接上工作呢？

使用charlietfl的答案，这是

var $showlinks = $('.showlinks')
// load first showlinks element
$showlinks.eq(0).load('http://example.com/links/ .static-links a:first', function() {
  // load second showlinks element
  $showlinks.eq(1).load('http://example.com/links/ .static-links a:nth-of-type(2)', function() {
  });
});

加载第一个链接a:first，但不加载a:nth-of-type(2)，结果为：

<div class="showlinks">
<a href="http://example.com">test 1</a>
</div>

Answer 1

$('.showlinks')选择页面中的所有类。因此，您要做的就是在第一个load()中加载具有相同内容的所有类，然后使用第二个load()替换该类中的所有内容

可以使用eq()通过索引来确定特定的目标

var $showlinks = $('.showlinks')
// load first showlinks element
$showlinks.eq(0).load('http://example.com/links/ .static-links a:first', function() {
  // load second showlinks element
  $showlinks.eq(1).load('http://example.com/culture/ .static-links a:nth-of-type(2)', function() {

    // do stuff to both
    $showlinks.prepend('<div class="read-unread">Unread</div>');
    $showlinks.visited('visited-link');
    $showlinks.prev().addClass('read');
    $showlinks.prev().text('Read');

  });
});

另一种并行执行而不是嵌套调用的方法是使用$.get()而不是load()，并自己解析响应。

然后在两个请求都完成后使用$.when运行

var $showlinks = $('.showlinks');
var baseUrl = 'http://example.com/';
var loadMeta= [
   {path: 'links', selector: '.static-links a:first'},
   {path: 'culture', selector: '.static-links a:nth-of-type(2)'}
];

function loadData(index){
   var opts = loadMeta[index];
   // return the $.ajax promise for `$.when()` to use below
   return $.get(baseUrl  + opts.path).then(function(data){
      $showlinks.eq(index).html( $(data).find(opts.selector) );
   })
}

// both requests get made right away
var req1 = loadData(0);
var req2 = loadData(1);

// runs after both requests have completed
$.when(req1, req2).then(function(){
           // do stuff to both
        $showlinks.prepend('<div class="read-unread">Unread</div>');
        $showlinks.visited('visited-link');
        $showlinks.prev().addClass('read');
        $showlinks.prev().text('Read');
})