时间戳

首页 > 解决方案 > 链接两个 jQuery .load() 请求会导致第二个覆盖第一个

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

问题描述

我正在尝试使用 .load()从同一 URLa的 div 加载前两个链接。.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工作也如何？

2018 年 5 月 28 日编辑：

使用 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>

标签： javascriptjquery

解决方案

$('.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');
})

推荐阅读