您可以 "nest "JQuery 加载 HTML 内容吗？

Question

是否可以使用 JQuery.load() 从多个 HTML 文件中 "nest" 内容？

我希望能够在顶级“内容”中包含所有 HTML 内容 div。
我的代码示例如下所示：

load.js - “firstLayer”加载到“content”div

$(function () {
    $('#content').load('/first.html #firstLayer', true)
    $('#firstLayerContent').load('/second.html #secondLayer', true)
})

first.html

<div id="firstLayer">
    <div id="firstLayerContent"></div>
</div>

second.html

<div id="secondLayer">
    <p style="font-size: 100px;">Hello world</p>
</div>

Answer 1

是的，你可以**。您只需要确保第二个 load() 调用在第一个调用之后执行，以便 #firstLayerContent 元素保证存在于您尝试将内容放入其中的位置它。为此，请使用回调参数：

jQuery($ => {
  $('#content').load('/first.html #firstLayer', () => {
    $('#firstLayerContent').load('/second.html #secondLayer');
  });
})

** 但是要非常小心这种模式，因为您很容易通过对部分数据发出大量小请求来耗尽服务器资源。在几乎所有情况下，从服务器检索所有需要的数据并在客户端处理它的单个更大的请求的性能更高。

Can you "nest "JQuery loading of HTML content?