你能“嵌套”JQuery 加载 HTML 内容吗？

【问题标题】：Can you "nest "JQuery loading of HTML content?你能“嵌套”JQuery 加载 HTML 内容吗？
【发布时间】：2021-09-27 01:59:55
【问题描述】：

是否可以使用 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>

second.html

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：