Question

我正在尝试使用.load（）从同一网址的div a加载前两个.static-links链接。我正在看这个答案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如何为每个链接工作？

编辑5/28/18：

使用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');
})

链接两个jQuery .load（）请求导致第二个覆盖第一个

1 个答案: