您可以“嵌套”JQuery 加载 HTML 内容吗？

Question

是否可以使用 JQuery.load() 从多个 HTML 文件“嵌套”内容？

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

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>

第二个.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');
  });
})

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