如何显示使用 jQuery load() 将多个项目 ajax 到多个元素中？答案

【问题标题】：How to show use jQuery load() to ajax multiple items into multiple elements?如何显示使用 jQuery load() 将多个项目 ajax 到多个元素中？
【发布时间】：2012-06-03 13:15:59
【问题描述】：

我需要将大页面中的某些项目加载到页面的不同元素中。我编写的代码可以正常工作，但是项目会一个接一个地加载，并且在停顿很多之后。我想我可能做错了，因为我不是一个完整的开发人员，而只是一个设计师。

我的代码如下：

$("#lot-rental").load("/est.html #est-rental");
$("#lot-deposit").load("/est.html #est-deposit");
$("#lot-date").load("/est.html #est-date");
$("#lot-build").load("/est.html #est-build");

【问题讨论】：

标签： javascript ajax jquery jquery-load

【解决方案1】：

使用$.get()加载数据，然后手动设置各个元素的内容。

$.get('/est.html', function(data) {
    $.each(['rental', 'deposit', 'data', 'build'], function(i, key) {
        $('#lot-' + key).html($(data).find('#est-' + key));
    });
}, 'html');

【讨论】：

谢谢你的回答似乎是我正在寻找的，但我已经尝试过了，在控制台中它说：data.find 不是一个函数，我可以看到它正在加载 html，但有些 find 无法正常工作。

【解决方案2】：

为什么不使用$.get 解析响应（查找元素）并将它们加载到主页：

$.get('/est.html',function(html){
    //wrap in jQuery so we can use it as context
    html = $(html);

    //find the item in html, and append to the container in the current page
    $('#est-rental',html).appendTo('#lot-rental');
    //     ^          ^                  ^-- target
    //     |          '-- context
    //     '-- the element to find in HTML
});

【讨论】：

【解决方案3】：

试试这个

$("#lot-rental").load("est.html#est-rental");
$("#lot-deposit").load("est.html#est-deposit");
$("#lot-date").load("est.html#est-date");
$("#lot-build").load("est.html#est-build");

【讨论】：

如果你想一个一个加载也可以试试这个。 $('#result').load('ajax/test.html', function() { $('#result1').load('ajax/test1.html', function() { }); });