使用$.get加载其他页面根元素失效？技术问题求助

这个问题我之前碰到过，核心原因是jQuery解析完整HTML文档时的特殊处理逻辑！

为什么find('#footer')找不到元素？ #

当你用$(data)处理从index.html获取到的完整HTML字符串时，jQuery会自动忽略掉<html>、<head>、<body>这些顶级容器标签，直接把它们内部的子元素（也就是<nav>、中间的<div>、<footer>）作为jQuery对象的顶层元素集合。

而find()方法是用来查找当前元素集合的后代元素，但<footer id='footer'>本身就是这个顶层集合里的元素之一，并不是某个元素的后代——这就解释了为什么你测试时：

$(data).find('#footer').length 返回0
$(data).find('nav').length 也返回0

相反，#menuItems是<nav>的后代，所以find('#menuItems')能正常找到它。

解决方法 #

有两种简单的方式可以修复这个问题：

方法1：用filter()代替find()

filter()是直接筛选当前jQuery集合中的元素，正好匹配我们的场景：

$.get('index.html', function(data) {
  $('#menuItems').replaceWith($(data).find("#menuItems")); // 保持不变
  $('#footer').replaceWith($(data).filter("#footer")); // 替换为filter
});

方法2：将HTML内容放入临时容器后再查找

如果你更习惯用find()，可以先把整个HTML字符串塞进一个临时的<div>容器里，这样所有元素都变成了这个容器的后代，就能用find()找到目标了：

$.get('index.html', function(data) {
  var tempWrapper = $('<div>').html(data); // 创建临时容器
  $('#menuItems').replaceWith(tempWrapper.find("#menuItems"));
  $('#footer').replaceWith(tempWrapper.find("#footer"));
});

两种方法都能解决你的问题，选哪种看个人习惯就行～

内容的提问来源于stack exchange，提问作者user736893