代码之家 › 专栏 › 技术社区 › BlueDogRanch

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

jquery javascript

BlueDogRanch · 技术社区 · 7 年前

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

这是源HTML,位于 http://example.com/links/ 它包含我要加载的前两个链接 .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函数名为jquery.visited.js https://github.com/ardouglass/jquery-visited/blob/master/src/visited.js . 我准备了一个分区,但是,当不链接这两个.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>

1 回复 | 直到 7 年前

charlietfl 7 年前

$('.showlinks') 选择页面中的所有类。所以您要做的是首先加载具有相同内容的所有类 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() 而不是 加载() 自己分析答案。

然后使用 $.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');
})