Javascript 使用$.get从另一个页面加载元素对根元素不起作用？_Javascript_Jquery_Html

Javascript 使用$.get从另一个页面加载元素对根元素不起作用？

javascript jquery html

Javascript 使用$.get从另一个页面加载元素对根元素不起作用？,javascript,jquery,html,Javascript,Jquery,Html,我有以下代码： //load nav menu and footer from index.html $.get('index.html', function(data) { $('#menuItems').replaceWith($(data).find("#menuItems")); //this works $('#footer').replaceWith($(data).find("#footer")); //this does not work }); 加载菜单的

我有以下代码：

//load nav menu and footer from index.html
$.get('index.html', function(data) {
    $('#menuItems').replaceWith($(data).find("#menuItems"));  //this works
    $('#footer').replaceWith($(data).find("#footer"));  //this does not work
});

加载菜单的代码有效，但加载页脚的代码无效。我能看到的唯一区别是

#footer

直接位于

body

元素下面

<!DOCTYPE html>
<html lang="en">
    <head>
       <!-- normal head stuff, script references, meta tags, etc. -->
    </head>
    <body>
      <nav>
        <ul id='menuItems'>
          <li>item</li>
        </ul>
      </nav>
      <div>some content here</div>
      <footer id='footer'>stuff</footer>
    </body>
</html>

我真的想不出还有什么不同。如果需要，我很乐意提供更多信息。

对根级别节点使用筛选器（请参阅）

let响应=`

项目

东西
`;
log（'footer:'，$（response）.filter（'#footer'）.length）；
log（'menuItems:'，$（response.find（'#menuItems'）.length）
对根级别节点使用筛选器（请参阅）

let响应=`

项目

东西
`;
log（'footer:'，$（response）.filter（'#footer'）.length）；
log（'menuItems:'，$（response.find（'#menuItems'）.length）
$（数据）
不返回整个HTML，只返回
元素的内容。因此，
和
成为$（数据）
中的顶级元素，但find（）
仅搜索子体
您应该将其包装在另一个元素中，以便可以搜索：

let数据=`

项目

东西
`;
$（“#按钮”）。单击（函数（）{
变量内容=$（“”{
html：数据
});
$（“#menuItems”）.replacetwith（contents.find（“#menuItems”）；
$（“#footer”）.replacetwith（contents.find（“#footer”）；
});


旧项目

老东西
单击$（数据）
不会返回整个HTML，只返回
元素的内容。因此，
和
成为$（数据）
中的顶级元素，但find（）
仅搜索子体
您应该将其包装在另一个元素中，以便可以搜索：

let数据=`

项目

东西
`;
$（“#按钮”）。单击（函数（）{
变量内容=$（“”{
html：数据
});
$（“#menuItems”）.replacetwith（contents.find（“#menuItems”）；
$（“#footer”）.replacetwith（contents.find（“#footer”）；
});


旧项目

老东西
单击
.find（）
仅搜索子体。什么的子体$.get
返回整个HTML文档。body
不是后代吗？如果不是，那么#footer
不是body
的后代吗？根是什么？这里是什么？对不起，那是我的错。我会编辑，但是d=$（数据）
你能给出你的index.html所需的代码，只包含主要结构组件。find（）
只搜索后代。什么的后代$.get
返回整个HTML文档。body
不是后代吗？如果不是，那么#footer
不是body
的后代吗？根是什么？这里是什么？对不起，那是我的错。我会编辑，但是d=$（数据）
你能给你的index.html所需的代码只包含主要的结构组件吗？这很不方便。谢谢你的解决方案（变通方法？）。看看链接帖子（function find2）中的第二个答案，是的，似乎有些过分，因为这不需要扩展。不过我很感激。这是find（）
？@ScottBeeson的预期行为吗？它与当元素不在DOM中时Jquery实现伪DOM树的方式有关。From doc:给定一个表示一组DOM元素的Jquery对象，.find（）方法允许我们在DOM树中搜索这些元素的后代，并从匹配的元素构造一个新的jQuery对象。谢谢你的解决方案（变通方法？）。看看链接帖子（function find2）中的第二个答案，是的，似乎有些过分，因为这不需要扩展。不过我很感激。这是find（）
？@ScottBeeson的预期行为吗？它与当元素不在DOM中时Jquery实现伪DOM树的方式有关。From doc:给定一个表示一组DOM元素的Jquery对象，.find（）方法允许我们在DOM树中搜索这些元素的后代，并从匹配的元素构造一个新的jQuery对象。情况似乎并非如此：@ScottBeeson这是数据
，而不是$（数据）
。这是$（数据）
的一部分：我的原始点仍然有效。它只包含
的内容--
和
是$（数据）
中的顶级元素。因为.find（）
只搜索子体，所以它找不到它们。我现在明白了。谢谢。情况似乎并非如此：@ScottBeeson那是数据
，而不是$（数据）
。这是$（数据）
的一部分：我的原始观点仍然有效。它只包含
的内容--
和
是$（数据）
中的顶级元素。因为.find（）只搜索子体，所以它找不到它们。我现在明白了。谢谢
11:54:12.267 $(data).find('#menuItems').length
11:54:12.270 1
11:54:15.633 $(data).find('#logo-container').length
11:54:15.635 1
11:54:23.001 $(data).find('#footer').length
11:54:23.004 0
11:54:37.008 $(data).find('nav').length
11:54:37.012 0