提问人：menardmam 提问时间：5/15/2009 最后编辑：Gamopomenardmam 更新时间：9/17/2020 访问量：26931
Jquery DIV 中的多个负载
Jquery Multiple load in a DIV
问：
这是我的代码：
$('#right').load('textes.html #nicolas');
$('#right').load('textes.html #antoine');
问题是 antoine 的内容覆盖了右边 div nicolas 加载的内容divdiv
div #right : load div nicolas from file textes.html = ok
div #right : load div antoine from file textes.html = overwrite content = No!
我想把安托万加到尼古拉斯身上。这是添加尼古拉斯，然后添加安托万，所以将是尼古拉斯+安托万#right
我试图将内容放入 var 中，但没有奏效。
任何想法 ？
最重要的是...我想在每次加载之间添加一个规则<hr>
也许是这样的事情，但这行不通。
$('#right').load('textes.shtml #nicolas').append('<hr>').load('textes.shtml #antoine'); return false;
答：
8赞
Pim Jager
5/15/2009
#1
为什么不能在一次调用中同时加载它们：
$('#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 的感觉）调用。从而节省带宽。但它也为您提供了更大的自由度，可以插入元素以及以何种顺序插入元素。
评论
0赞
menardmam
5/15/2009
你真的很聪明...它看起来很简单......但是<小时呢>
0赞
menardmam
5/15/2009
Something bizzare append... $（'#right'）.load（'textes.html #a， #b， #c， #d， #e'）;#right div 中的内容顺序不正确。它看起来像 A、B、E、D、C 或其他任何东西！
1赞
yfeldblum
5/15/2009
#2
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）的方式。
评论
0赞
menardmam
5/15/2009
是否可以在没有额外的 div 标记的情况下进行加载......只是纯文本等等......我想在每次加载之间添加一个规则
0赞
yfeldblum
5/15/2009
div 是用于加载任何内容的容器。div 是动态创建的，但不会注入到页面中。如果你想做一些花哨的事情，我会按照我在这里展示的方式去做。此外，我还编辑了它以显示如何在两个加载的内容部分之间注入 <hr />。
0赞
menardmam
5/15/2009
我喜欢它工作，但出现错误：访问受限制的 URI 被拒绝“代码：”1012 我认为它与代码无关，它与负载有关
0赞
Pim Jager
5/15/2009
这是比我更好的方法，因为它给了你更多的自由。但是，在最坏的情况下，它将对服务器进行四次调用。
0赞
Paul Morie
5/15/2009
#3
请参阅 appendTo 函数。
4赞
brianpeiris
5/16/2009
#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>
评论
0赞
menardmam
5/16/2009
这对我来说看起来很复杂，也许当我有时间时，我会检查一下，但是 KyleFarris 解决方案对我来说真的很好，而且它工作正常，谢谢
20赞
KyleFarris
5/16/2009
#5
也许我遗漏了一些东西，但似乎你们都错过了这样一个事实，即这是一个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');
就这么简单。
评论
0赞
user756659
9/5/2014
再加上这么多年后......刚刚遇到一种情况，我需要在 ajax 表单发布后更新多个 div......这个解决方案效果很好，只需稍作调整即可适应我的使用情况。
0赞
8/31/2018
发现这段代码非常有用，谢谢！我有一个关于它的问题，假设我在“#nicolas”中有一个 div，我需要在这个 get 调用中删除它，我该怎么做？@KyleFarris
0赞
menardmam
5/16/2009
#6
我用 KyleFarris 非常简单的答案让它工作
我什至又简化了它一点，它工作得很好
Thnaks大家，这是最终的代码：
<script>
$.get('textes.shtml', {}, function(data) {
var $response = $('<div />').html(data);
$('#right')
.append($response.find('#nicolas'))
.append('<hr />')
.append($response.find('#antoine'));
},'html');
</script>
评论