DIV 中的 Jquery 多重加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/866284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Multiple load in a DIV
提问by menardmam
Here is my code
这是我的代码
$('#right').load('textes.html #nicolas');
$('#right').load('textes.html #antoine');
the problem is that the content of the div antoine overwrite in the right div the content load by the div nicolas
问题是 div antoine 的内容在正确的 div 中覆盖了 div nicolas 加载的内容
div #right : load div nicolas from file textes.html = ok div #right : load div antoine from file textes.html = overwrite content = No!
div #right : 从文件 textes.html 加载 div nicolas = ok div #right : 从文件 textes.html 加载 div antoine = 覆盖内容 = 不！
I like to append antoine to nicolas I like to add nicolas then add antone so the #right will be nicolas + antoine
我喜欢将 antoine 附加到 nicolas 我喜欢添加 nicolas 然后添加 antone 所以 #right 将是 nicolas + antoine
I have try to get the content into a var... nope
我尝试将内容放入 var 中...不
any idea ?
任何的想法 ？
on top of that... i will like to add a rule <hr>BETWEEN each load
最重要的是......我想在<hr>每个负载之间添加一个规则
Maybe something like that can be done... it don't work !
也许可以做这样的事情......它不起作用！
$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;
回答by KyleFarris
Maybe I'm missing something but it seems like you all have been missing the fact that this is an ajax call and you are calling functions procedurally and not as a callback function based on a successful ajax response.
也许我错过了一些东西，但似乎你们都错过了这样一个事实，即这是一个 ajax 调用，并且您正在按程序调用函数，而不是作为基于成功 ajax 响应的回调函数。
Besides, if you are doing anything more complex than loading some (X)HTML into an element, you should probably use one of the more powerful jQuery ajax methods (i.e., get() or post() or ajax()).
此外，如果您正在做比将一些 (X)HTML 加载到元素中更复杂的事情，您可能应该使用更强大的 jQuery ajax 方法之一（即，get() 或 post() 或 ajax()）。
Assuming you'll get (X)HTML in the response:
假设您将在响应中获得 (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');
It's really as simple as that.
就这么简单。
回答by Pim Jager
WHy not load them both in one call:
为什么不在一次调用中加载它们：
$('#right').load('textes.html #nicolas,#antoine');
EDIT
Inspired by Justice way I thought of the follwoing:
编辑
受正义方式的启发，我想到了以下内容：
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);
This will make only one (or two, depending on what firefox feels like) calls to the server. Thus saving bandwidth. But it also gives you more freedom in how to insert the elements and in which order.
这只会向服务器发出一个（或两个，取决于 firefox 的感觉）调用。从而节省带宽。但它也让您在如何插入元素和插入顺序方面有更多的自由。
回答by brianpeiris
Here's the full source code for a solution.
这是解决方案的完整源代码。
I've hosted a working sample on JSBin.com: http://jsbin.com/ulodu(Editable via http://jsbin.com/ulodu/edit)
我在 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>
回答by yfeldblum
var nicolas = $('<div />').load('textes.html #nicolas');
var antoine = $('<div />').load('textes.html #antoine');
$('#right')
.append(nicolas.children())
.append('<hr />')
.append(antoine.children())
;
Or, Pim Jager's way.
或者，Pim Jager 的方式。
回答by menardmam
I got it working with the REALLY SIMPLE answer of KyleFarris
我得到了它与凯尔法里斯的真正简单的答案
I even simplified it a little more, and it work fine
我什至简化了一点，它工作正常
Thnaks everyone, here is the final code :
谢谢大家，这是最终的代码：
<script>
$.get('textes.shtml', {}, function(data) {
var $response = $('<div />').html(data);
$('#right')
.append($response.find('#nicolas'))
.append('<hr />')
.append($response.find('#antoine'));
},'html');
</script>
