Ajax 加载容器内容

使用 jQuery，您可以加载 URL 的内容，还可以加载该 URL 内特定 CSS 选择器的内容。 就像这样。

$("#area").load("something.html #content");

这会在 something.html 文件中找到 ID 为 content 的元素内的内容，并将其放置到当前页面上，位于 ID 为 area 的元素内部。

但是，假设 something.html 实际上与当前页面非常相似。 您的目标实际上是替换 something.html 中的 #area。

$("#area").load("something.html #area");

但这样做会有问题，因为您最终会得到

<div id="area">
    <div id="area">
         <!-- stuff -->
    </div>
</div>

并且无论触发该操作的是什么，如果您再次执行它，都会导致更多嵌套（不好）。

简单的解决方案是只获取 #area 的所有内容，而不是 #area 本身。

$("#area").load("something.html #area > *");

以及世界上最简单的（功能不完整）演示

查看演示

这在以下情况下特别有用：

• 您正在将站点作为渐进增强进行 Ajax 化，因此每个 URL 不仅仅是数据片段，而是一个独立存在的完整页面（并且页面彼此结构相似）。
• 您不想向页面添加像 <div id="inside"></div> 这样的标记来解决此问题。

感谢 Anthony Harris。