Question

我正在尝试编写一个客户端脚本，以非典型的方式使用.load。我正在使用另一个站点而我无权更改他们生成的代码，因此我必须在客户端执行所有操作。

页面看起来像

<html>
  <!-- the head -->
  <body>
    <div id="body">
      <!-- the content -->
    </div>
  </body>
</html>

现在，我想用XHR更新页面。我想将#body的内容替换为XHR中#body的新内容。我的第一直觉是这样做：

$('#body').load('/ #body')

但是这给了我一个看起来像这样的DOM：

<html>
  <!-- the head -->
  <body>
    <div id="body">
      <div id="body">
        <!-- the content -->
      </div>
    </div>
  </body>
</html>

这显然不是我想要的。我希望新提取的副本中的只能覆盖当前副本中的。

我也尝试了

的内容

$.get('/', function(data) {
  $('#body').html($(data).find('#body').html());
}

无济于事。当我玩它时，我发现$(data).find('#body')从未找到任何东西。

Answer 1

你可以包装你的XHR的结果，假设它是jquery对象中的html，抓住调用页面的主体并使用replaceWith。

//snip
var xhrResult = $("<html><div id='body'>blah</div></html>"), // pretend this was returned
    newContent = xhrResult.filter("#body"),
    placeHere = $("#body");
placeHere.replaceWith(newContent);

根据这个小提琴编辑： http://jsfiddle.net/bstakes/VmhBW/

用jQuery.fn.load替换内容

1 个答案: