11

这是我的代码：

$('#right').load('textes.html #nicolas');
$('#right').load('textes.html #antoine');

问题是divantoine的内容覆盖了右边的div nicolas加载的内容div

div #right : load div nicolas from file textes.html = ok
div #right : load div antoine from file textes.html = overwrite content = No!

我想将 antoine 添加到 nicolas。这是添加 nicolas 然后添加 antoine 所以#right将是 nicolas + antoine

我试图将内容放入 var 中，但没有成功。

任何的想法 ？

最重要的是......我想在<hr>每次加载之间添加一条规则

也许是这样的，但这不起作用。

$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;
4

6 回答 6

19

也许我遗漏了一些东西，但似乎你们都错过了这样一个事实，即这是一个 ajax 调用，并且您是在程序上调用函数，而不是作为基于成功 ajax 响应的回调函数。

此外，如果您做的事情比将一些 (X)HTML 加载到元素中更复杂，您可能应该使用更强大的 jQuery ajax 方法之一（即 get() 或 post() 或 ajax()）。

假设您将在响应中获得 (X)HTML：

// Only ONE ajax call and very simply parsing... 
$.get('textes.html', {}, function(data) {
    var $response = $('<div />').html(data);
    var $nicolas = $response.find('#nicolas')
    var $antoine = $response.find('#antoine');
    $('#right').append($nicolas).append($antoine);
},'html');

真的就这么简单。

于 2009-05-15T18:14:18.747 回答
8

为什么不在一次调用中同时加载它们：

$('#right').load('textes.html #nicolas,#antoine');

编辑
受正义的启发，我想到了以下内容：

var $page = $('<div />').load('textes.html #nicolas,#antoine');
var $nicolas = $page.find('#nicolas');
var $antoine = $page.find('#antoine');
$('#right')
 .html($nicolas)
 .append('<hr/>')
 .append($antoine);

这将只对服务器进行一次（或两次，取决于 Firefox 的感觉）调用。从而节省带宽。但它也让您在如何插入元素以及以何种顺序插入元素方面拥有更多自由。

于 2009-05-14T22:57:22.443 回答
4

这是解决方案的完整源代码。

我在 JSBin.com 上托管了一个工作示例：http://jsbin.com/ulodu （可通过http://jsbin.com/ulodu/edit编辑）

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script>
$(function(){
  $.get(
    'http://jsbin.com/oyuho',
    function(response){
      /* 
        Wrap the response in a <div /> so that we can use
        find() instead of filter(). Also remove <script> tags.
        This is essentially what $.load() does.
      */  
      var responseWrapper = $('<div />').append(response.replace(/<script(.|\s)*?\/script>/g, ""))
      $('#content')
        .append(responseWrapper.find('#nicolas'))
        .append('<hr />')
        .append(responseWrapper.find('#antoine'));
    }
  );
});
</script>
</head>
<body>
  <div id="content"></div>
</body>
</html>
于 2009-05-15T17:55:20.413 回答
1 
var nicolas = $('<div />').load('textes.html #nicolas');
var antoine = $('<div />').load('textes.html #antoine');
$('#right')
    .append(nicolas.children())
    .append('<hr />')
    .append(antoine.children())
;

或者，Pim Jager 的方式。

于 2009-05-14T22:58:24.453 回答
0

请参阅appendTo函数。

于 2009-05-14T22:59:24.450 回答
0

我得到了它与 KyleFarris 真正简单的答案一起工作

我什至把它简化了一点，它工作得很好

谢谢大家，这是最终代码：

<script>
$.get('textes.shtml', {}, function(data) {
    var $response = $('<div />').html(data);
    $('#right')
    .append($response.find('#nicolas'))
    .append('<hr />')
    .append($response.find('#antoine'));
},'html');
</script>
于 2009-05-15T19:29:03.217 回答