Question

我有以下代码：

//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>

上面的基本布局与index.html以及从中拉出的文件相同。

在控制台中，如果我进行一些测试，则表明根元素未被发现＆＃34;：

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

我真的无法想到任何其他差异。如果需要，我很乐意提供更多信息。

Answer 1

对根级别节点使用过滤器（请参阅jQuery.find() ignores root node）

＆＃13;

let response = `<body>
  <nav>
    <ul id="menuItems">
      <li>item</li>
    </ul>
  </nav>  
  <footer id="footer">stuff</footer>
</body>`;

console.log('footer : ', $(response).filter('#footer').length);
console.log('menuItems : ', $(response).find('#menuItems').length);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

要获得解决方法，您可以创建自定义函数，如描述in this post。

Answer 2

$(data)不返回整个HTML，只返回<body>元素的内容。因此，<nav>和<footer>成为$(data)中的顶级元素，但find()仅搜索后代。

你应该将它包装在另一个元素中，以便你可以搜索它：

let data = `<body>
  <nav>
    <ul id="menuItems">
      <li>item</li>
    </ul>
  </nav>  
  <footer id="footer">stuff</footer>
</body>`;

$("#button").click(function() {
  var contents = $("<div>", {
    html: data
  });
  
  $('#menuItems').replaceWith(contents.find("#menuItems"));
  $('#footer').replaceWith(contents.find("#footer"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="menuItems">
    <li>old item</li>
  </ul>
</nav>
<footer id="footer">old stuff</footer>
<button id="button">Click</button>

使用$ .get从其他页面加载元素对根元素不起作用？

2 个答案: